[PaperWings]

I've not really noticed this issue before, but for a website I am putting together when I set the images as background-image in CSS it is making them out of focus/blurry. But if you right click and "view background image" it looks fine and sharp.

It is actually driving me insane! The images were designed/saved as 72dpi, they are .png

Please can someone explain what the heck is causing this so I can make it look somewhat decent The CSS for the very top image, given in the example:

.hwrap {
	background-image: url("http://ebilmoose.com/layouts/hortaya/images/img01.png");
	background-repeat: no-repeat;
	height: 121px;
	width: 1024px;
}

- Website: http://ebilmoose.com/layouts/hortaya/
- Example background image, to save you right clicking to view: http://ebilmoose.com...mages/img01.png

The website is for a fake kennel so please ignore the jibberish at the bottom =p

[Shane Hudson]

Could you screenshot please? I cannot see any differences on my end!

[PaperWings]

Well that's annoying! For me the text, and the edges are so blurred it looks weird.

What it looks like for me: http://ebilmoose.com...ages/screen.png

What the image looks like when you just upload it as that: http://ebilmoose.com...rtaya/index.png

[DimitriV]

I had a look and theres no difference. What's the DPI of your screen? Mine is 109 ppi.

[Shane Hudson]

Well it would seem you are on Windows while we are on Mac. Therefore, it must be something to do with either optimisation of image or (though unlikely) font rendering.. I have had similar problem before but that was more due to size rather than being blurry. Not entirely sure what would cause it though.

[DimitriV]

I'm on a Mac. Or were you talking to the OP.

[Atli]

I'm on Windows at the moment (reluctantly) and I can't see any difference either. Tested IE, Firefox and Chrome.

[e_i_pi]

I can't see a difference on IE9, though I've noticed a similar problem in the past with my stuff on IE7. I think I narrowed it down to the height and width attributes not exactly matching the image dimensions, but your dimensions are fine.

I know there was a problem in FF3 to do with blurred backgrounds. Is that the browser you're running on? The solution for blurred images on older browsers is generally adding this line to the CSS element:

image-rendering: optimizeQuality;