How bad is to store all background images in CSS?


Tags: css

Problem :

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.



Solution :

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.


    CSS Howto..

    How to print outlines and background colors from css, when using JQuery printElement, and IE8?

    How do I scale the size of the elements in my HTML according to screen size?

    How to apply my class from css to checkbox? [duplicate]

    CSS / Jquery How to auto-size containers and images

    How to make an element match the height of a dynamic page

    How get device resolution for loading sharp images but size fonts/divs properly with viewport width=device-width?

    How to match baseline in two floating divs

    How can I build a CSS selector that will highlight/outline a focused tab, while not effecting other non-tab widgets?

    How to make “button-like appearance” with CSS

    How to add a color transitions in CSS and HTML like the one in the login area of the Instagram app?

    How to adjust height based on content css

    how do I zoom a background image on a div with background-size

    How can I show a element on my site when hovered with only JS?

    How to match a comment node with the Jsoup selector api?

    Showing refresh button when animation is complete?

    Load More / Show Less issues using jquery

    how to set auto div height from ul/li elements variable height

    How to override HTML with CSS

    How to reapply new text format in CSS after removing format initially

    how to handle spanish character for classname in CSS file?

    how to change the background of a css-class by hover a button?

    How do I apply the “outline” CSS property with JavaScript?

    Showing an hidden element with an opacity-animation

    How can I exclude some images from being preloaded

    How to fix the headline row in a table using css? [closed]

    How to create a tiled background button using CSS

    how to style every html posts differently in css

    How to change font color inside nav element?

    How to give a property to an element using its title in css [duplicate]

    How to achieve this layout with div and css?