1

I have a class defined in my styles.css as:

.caquote {background: url("http://cdn.domain.com/images/quotebig.png") no-repeat 10px 8px ;}

Will the image still be loaded by modern browsers if on the html page I don't define .caquote anywhere?

JoaMika
  • 1,727
  • 6
  • 32
  • 61
  • This should be easy to check by making page that includes `styles.css` but not that particular class. Load that page into your browser and watch the network traffic (using "Developer Tools" in Chrome or "Web Console" in Firefox. – Jud Nov 16 '13 at 20:18
  • possible duplicate of [Are unused CSS images downloaded?](http://stackoverflow.com/questions/2396909/are-unused-css-images-downloaded) – ffflabs Jun 18 '14 at 13:21

2 Answers2

2

The images of a css are download only if they are used in the HTML : I have made an example for you in a jsfiddle : http://jsfiddle.net/b3QXu/ As you can see, the second image is load only when you hover the div. If you don't hover the div, the image will not be downloaded by your computer.

#bonjour {
background-image : url(http://rosalienebacchus.files.wordpress.com/2012/04/planet-earth-from-space.jpg);
width : 500px;
height : 500px;
background-color : #123456;
background-size : cover;
}

#bonjour:hover {
    background-image : url(http://www.desktopas.com/files/2013/06/Outer-Space-Moon-    Earth-Spaceman.jpg);
}

For your information : All images on a HTML file are load, even if they are set as display:none on css.

Damien
  • 333
  • 1
  • 3
  • 17
  • Damien your answer says the opposite of @ceqfault - who is correct ? – JoaMika Nov 16 '13 at 20:43
  • I'm sure of my answer :) Have you try my jsfiddle ? You see clearly that the second image is not load until you hover the div. Even if this image is declared in the css. important : clear you cache before retesting ! – Damien Nov 16 '13 at 20:55
  • This is the correct answer for modern browsers (IE7 and newer). [It has been answered before](http://stackoverflow.com/questions/2396909/are-unused-css-images-downloaded). – ffflabs Jun 18 '14 at 13:21
-1

I don't see the two answers as contradictory. Damien says the background-image property that loads an image is invoked only when it's used. In his hover example, the image wasn't needed until the hover event.

cegfault says that the images are loaded even in a display:none. He also says that that the page can display (as enough elements are calculated and rendered), and then [once it has downloaded in parallel] the background image will appear. That doesn't mean that the bg image was blocked. Just that it was so big that it took a while to download.

saileron
  • 7
  • 4