CodeIgniter Forums

Full Version: images in CSS not loading
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

El Forum

[eluser]Filip_vh[/eluser]
Hi!

So I've got my first code igniter site up and running (hooray). and now I'm starting on a second one. On the first one I just put colours in my CSS file.

now in this second one I'm trying to link an image as a background. The image however can't be found?



I've tried everything but it just WON'T load the CSS files.

I've put the images in the same location like i did with the other site.

Code:
#page .bgbtm {
    background: url(images/img05.jpg) no-repeat left bottom;
}

map structure:

/
|-images
|-system
|-file.css

the thing is. When the site is loaded, www.mysite.com, it loads all the images perfectly.
from the moment a controller and action is added to the url, www.mysite.com/index.php/home/index, no image is loaded at all. It's like it can't find the CSS file anymore all of a sudden. Yet it should be the same like the previous site?

any idea why it's not working?

my guess would be that it's trying to load the images from
www.mysite.com/index.php/home/index while the image is located at www.mysite.com/images/

so... anybody any idea's??

El Forum

[eluser]Pascal Kriete[/eluser]
Add a leading slash to your image url:
Code:
background: url(/images/img05.jpg) no-repeat left bottom;

El Forum

[eluser]Nick Husher[/eluser]
The quickest way to debug problems like this is to pull up Firebug and use the CSS viewer to open your background image in a new tab. That'll show you the full URI path the CSS is trying to access. From there you can figure out some solutions on how to keep your CSS working all the time.

One thing to remember is that relative paths in CSS are relative to the location of the CSS, which is not always the same as the location of the document that is making use of that CSS. For instance, my favorite directory structure is this:

Code:
+ assets
| + css
| + img
|
+ system
| ...

Which means that all of my CSS background urls can be relative and of the form
Code:
background: transparent url(../img/html-bg.jpg)
and they will always be guaranteed to work.

El Forum

[eluser]Filip_vh[/eluser]
Ok, **** me.

I'm very sorry to cause you guys these problems, but I discovered the following.
It suddenly hit me that I was working with a master page. the link in this master page to the CSS file was set to "style.css". Which of course wasn't found and needed a leading slash. I tried all the leading slashes in the CSS files but it's solved now.


SOrry for the trouble guys.

I'm such an idiot in this stuff. I really should check everything twice before I post something like this on a forum.

Sigh...


Thanks for the help though!!

El Forum

[eluser]Nick Husher[/eluser]
Again, whenever something goes wrong on the frontside, Firebug is your friend. Smile