Lucy Posted November 22, 2014 Share Posted November 22, 2014 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. Link to comment Share on other sites More sharing options...
Ingolme Posted November 22, 2014 Share Posted November 22, 2014 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. Link to comment Share on other sites More sharing options...
Lucy Posted November 22, 2014 Author Share Posted November 22, 2014 Ah... that's interesting - thank you! Changing the position into pixels/rem works much better. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now