Forums

Still cannot get 5.7 to load a background image from a CSS file.

Permalink
My CSS file loads in the page header properly. Firebug shows "background-image: url(images/background.jpg);" but Firefox or Chrome will not load it from my CSS file. If I add this this directly to the <div> tag in my header file, it will then load.

What am I missing?
ThomasJ
 
WillemAnchor replied on at Permalink Reply
WillemAnchor
maybe you've got the path wrong ? where is your css file ?
url(../images/bg.jpg)
ThomasJ replied on at Permalink Reply
ThomasJ
My path should be correct. I have in my header.css file;
.header_logo {
   width: 900px;
   height: 400px;
   background-color: #6699aa;
   background-image: url("images/impossible-header-bkgnd900x400.jpg");
   margin: 0 auto;   
}

My link statement in my header.php is;
<link rel="stylesheet" type="text/css" href="<?php echo $view->getThemePath()?>/css/header.css">

The link showing in my page's <head> section is;
<link href="/application/themes/minimal/css/header.css" type="text/css" rel="stylesheet">
WillemAnchor replied on at Permalink Best Answer Reply
WillemAnchor
http://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to
ThomasJ replied on at Permalink Reply
ThomasJ
Thanks for the link. The answer was there; "Partial URLs are interpreted relative to the source of the style sheet, not relative to the document." in other words, I need to drop back one directory, "../images/image.jpg".

Other documents that I've read while researching this problem were saying that from where ever the theme was loaded from, that is the base directory that is referenced by a relative file load. Therefore, I didn't consider that when a file is required from within a style sheet that the relative path starts from where that CSS file is located.
WillemAnchor replied on at Permalink Reply
WillemAnchor
Yes, good that it's solved now. I think it was better explained on stackoverflow than onhttp://www.w3.org.