CODEWITHSUNDEEP
cssbackground-image
a coder
a coder

Reputation: 7649

How do browsers locate background-image in CSS?

I'm trying to find out why a background image isn't appearing.

By default, do browsers look for referenced images in the same folder as the style sheet or the script calling the style sheet?

Ex.
Script is /foo/bar.html Stylesheet is /css/site.css

site.css contains: 

.header {background-image: url(beautiful.png);}

Is the browser expecting the file beautiful.png in /foo, or /css?

Also, is it acceptable to reference this image by using the webroot? Ex: 

(file in /images/styles/)
.header {background-image: url(/images/styles/beautiful.png);}

Upvotes: 0

Views: 56

Answers (1)

steveax
steveax

Reputation: 17743

It's relative to the style sheet, not the document:

In order to create modular style sheets that are not dependent on the absolute location of a resource, authors may use relative URIs. Relative URIs (as defined in [RFC3986]) are resolved to full URIs using a base URI. RFC 3986, section 5, defines the normative algorithm for this process. For CSS style sheets, the base URI is that of the style sheet, not that of the source document.

Root relative paths (leading slash) are fine and what I usually use.

Upvotes: 1

Related Questions