7 Replies - 5778 Views - Last Post: 04 March 2012 - 06:29 PM

#1 PaperWings  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 08-October 11

CSS background-image not sharp

Posted 04 March 2012 - 04:05 PM

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

Is This A Good Question/Topic? 0
  • +

Replies To: CSS background-image not sharp

#2 Shane Hudson  Icon User is offline

  • D.I.C Technophile
  • member icon

Reputation: 343
  • View blog
  • Posts: 1,286
  • Joined: 06-December 09

Re: CSS background-image not sharp

Posted 04 March 2012 - 04:07 PM

Could you screenshot please? I cannot see any differences on my end!
Was This Post Helpful? 0
  • +
  • -

#3 PaperWings  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 08-October 11

Re: CSS background-image not sharp

Posted 04 March 2012 - 04:13 PM

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
Was This Post Helpful? 0
  • +
  • -

#4 DimitriV  Icon User is offline

  • They don't think it be like it is, but it do
  • member icon

Reputation: 583
  • View blog
  • Posts: 2,738
  • Joined: 24-July 11

Re: CSS background-image not sharp

Posted 04 March 2012 - 04:17 PM

I had a look and theres no difference. What's the DPI of your screen? Mine is 109 ppi.
Was This Post Helpful? 0
  • +
  • -

#5 Shane Hudson  Icon User is offline

  • D.I.C Technophile
  • member icon

Reputation: 343
  • View blog
  • Posts: 1,286
  • Joined: 06-December 09

Re: CSS background-image not sharp

Posted 04 March 2012 - 04:20 PM

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.
Was This Post Helpful? 0
  • +
  • -

#6 DimitriV  Icon User is offline

  • They don't think it be like it is, but it do
  • member icon

Reputation: 583
  • View blog
  • Posts: 2,738
  • Joined: 24-July 11

Re: CSS background-image not sharp

Posted 04 March 2012 - 04:25 PM

I'm on a Mac. Or were you talking to the OP.
Was This Post Helpful? 0
  • +
  • -

#7 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3716
  • View blog
  • Posts: 5,976
  • Joined: 08-June 10

Re: CSS background-image not sharp

Posted 04 March 2012 - 04:41 PM

I'm on Windows at the moment (reluctantly) and I can't see any difference either. Tested IE, Firefox and Chrome.
Was This Post Helpful? 0
  • +
  • -

#8 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: CSS background-image not sharp

Posted 04 March 2012 - 06:29 PM

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;


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1