CSS Tip for Relative Pathing with URIs

I’m working on a CSS style sheet and using the background-image property to set up an image in a header. I seem to forget from time to time how to correctly form a relative URL in CSS, especially when switching contexts back and forth between client- and server-side programming as well as moving in and out of different component models and view engines.

CSS makes things simple for us to use a consistent pattern for resilient relative URLs. Just remember one simple rule.

For CSS style sheets, the base URI is that of the style sheet, not that of the source document.

There you go. The CSS spec designers did a nice job of making it simple to use URLs if you use a path relative to the style sheet. No matter what site you’re working on or which component you’re in, all you need to do is use a path relative to your style sheet and everything will work out fine and dandy.

Comments are closed.

Sign in
classic
Forgot password?
×
Sign up

(*) Required fields

I agree with OptimaSales Terms & Privacy Policy

×