Blurred background image - fine when in image tags

[Lucy]

I have a large (originally vector) image which, when placed in image tags with a width of 100%, scales down just fine - it retains all its crispness. However, if set as a background image in the same area, despite being scaled to the same size, becomes somewhat blurry. Also, I've noticed when making the browser smaller, it becomes sharper during movement and then 'sets' back to the blurry image. Does that make sense? Here's my CSS:

#left			{		float:left;		width:25%;		margin-left:2%;		padding-top:2%;		background-image:url('images/logo.png');		background-repeat:no-repeat;		background-position:50% 5%;		background-size:contain;}

Can anyone help?

 

I looked into it and the consensus seems to be that browsers aren't very good at resizing - that's fine, but then why does the image look great as an element on the page? I must be missing something here.

[Ingolme]

The image element is located at a discrete pixel position on the screen. The background may be being placed in a half-pixel position which causes the browser to draw one pixel of the image onto two pixels of the screen.

 

This article is talking about the <canvas> element, but the effect is similar: http://seb.ly/2011/02/html5-canvas-sprite-optimisation/

I just want to show you the image they're displaying in the article.

[Lucy]

Ah... that's interesting - thank you! Changing the position into pixels/rem works much better.