Menu
I've had this feeling more often that images set as background-size:cover (on a div) don't look sharp and crispy in Google Chrome.
Here's the CSS I use.
.slide {
width:1280px;
height:400px;
background-image:url(background.jpg);
-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
background-size: cover!important;
background-position:center center;
background-repeat:no-repeat;
}
View live example here: http://www.wovenplus.com/test/
Just compare the above link in Chrome and IE. In my case in Chrome the image looks blurry and dull and in IE it looks sharp and crispy. (take a close look on the leaves or top of the cusions, or switch between Chrome and IE window to see the difference).
Anyone noticed this also? Any solution for this?
241
Many users have been reporting that sometimes Chrome looks blurry. To fix that, you just need to clear your cache and browsing data. Resetting the browser settings to default can also help with these types of issues.
Simple, the browser is trying to maintain the image aspect ratio based on the original size, resulting in a calculated height with a decimal value which in turn causes pixel compression, hence a blurry image.
This can happen if the picture file does not match the size of your screen. For example, many home computer monitors are set at a size of 1280x1024 pixels (the number of dots that make up the image). If you use a picture file smaller than this, it will be blurry when it is stretched out to fit the screen.
First, we create a <div> element (class="background") with a background image, and a border. Then we create another <div> (class="transbox") inside the first <div>. The <div class="transbox"> have a background color, and a border - the div is transparent.
Try adding this to the code:
image-rendering: -webkit-optimize-contrast;
For me it did the trick perfectly.
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
