CODEWITHSUNDEEP
htmlcss
Isaac
Isaac

Reputation: 35

When does css file retrieve background-img URL?

When a .css file uses a url for an image file, does the client retrieve that image when the .css file is loaded or does it wait until the specific class is assigned to an element?

For example -

A user loads home.html with style.css referenced in the header. The home page does not include any elements with class attach_background_image, but within style.css we have

.attach_background_image{
    background-image:URL(background.png);
}

Will background.png be retrieved when home.html is hit? Or does the image only get requested when an element meets the css selector criteria?

Upvotes: 0

Views: 60

Answers (2)

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

The whole CSS-file is loaded on page-load, so that's when the file will be retrieved. That the CSS in the file isn't actually used anywhere doesn't matter.

EDIT Sorry, I realised the original answer was wrong - the CSS file is loaded (all of it), but the external resources are loaded on a on-use basis, so until that class or element is present on the page, it will not run the GET-request to fetch it.

That means that if you for instance have a javascript change classes, the image will get retrieved, which of course can lead to slightly longer load-times than expected (depending on where the resource is located, and the size of the image)

Upvotes: -1

AzizurRahamanCA
AzizurRahamanCA

Reputation: 170

it will be retrieved on page load, when the class .attach_background_image is loaded

Upvotes: 3

Related Questions