2

I have created the layout of the website (template). I used Photoshop to design the picture and sliced it to create the divs. It gave me an HTML file including the HTML and CSS code. I separated these in two files HTML and CSS. The background images were being called inside the <div id="idName"> tags as <img src=... tags. I changed this. I loaded the images in the CSS file as 

idName { background-image: url(URL); }

All the images in the site are loaded like this creating the background as a whole.

Now my question is: Is this a bad practice? because if I leave the images inside the <div> tags I wont be able to put my content on top of the image. With the background-image attribute in the css file I can put my content anywhere, not having to worry about the background.

Andrew Marshall
  • 95,083
  • 20
  • 220
  • 214
allegjdm93
  • 592
  • 6
  • 24
  • Not bad at all, loads of web designers/developers store images in background css these days. – Leo Haris Jan 26 '12 at 23:52
  • 1
    but this is not _storing_ ? - like when you have data-uri images in your css ;) – c69 Jan 27 '12 at 00:01
  • this is a terrible idea for countless reasons – one.beat.consumer Apr 09 '12 at 17:47
  • to explain a bit more, here are a few: (1) accessibility, (2) some images are content not decaration, (3) unless base64 encoded they still are extra HTTP calls, (4) you don't need image backgrounds to overlay text on an image - learn about positioning CSS elements and zindex, etc. -- many many more. – one.beat.consumer Apr 09 '12 at 17:47

1 Answers1

3

No, this is perfectly fine, and actually may be a best practice for background images. Moving the image declarations into the style sheet means the images may be downloaded a little bit later, but most browsers should have enough other resources to load in the meantime, and you'll want prioritize HTML and stylesheets before background images anyways.

Just don't use CSS backgrounds for actual images: If the fallback background color would significantly change the meaning (i.e. the image is content), you should use <img> elements with an alt= attribute. If you're not sure whether this is a good idea, consider this question.

To increase performance (by reducing the number of HTTP requests), you may want to consider using CSS sprites.

Community
  • 1
  • 1
phihag
  • 278,196
  • 72
  • 453
  • 469
  • 2
    Good answer. Maybe just add a few words on how, while CSS is the right place for background images, you should still use `` tags (with appropriate alternative text or caption) for images that are part of the content? You could link to http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image for further guidance on this. – Jordan Gray Jan 26 '12 at 23:58
  • Thank you very much guys. You put me in the right track and I'll be confident now of my design! :) – allegjdm93 Jan 27 '12 at 03:30