defining correct url for css background property |
[eluser]adc[/eluser]
Hello everybody. I'm trying to set up the background image for my header div. I'd like to use the background property in my css. I've got the following folder structure: ../my_app/ | +--css +--images +--javascript +--system | +--[CI system folder] So I defined the rule: div #header{ background: url(../images/header_logo.jpg); } But the image is not displayed. I think I have some problem with the correct path. Any clue? Thanks ADC
[eluser]bapobap[/eluser]
It should be something like this? Code: /public_html/ You should reference it as (/images/), instead of ../images I think?
[eluser]Taff[/eluser]
I think the problem is that although it may work on one page such as index.php when you go to your first controller the path will become different, try using an absolute path like: Code: div #header{ An alternative would probably be to import your css file Code: <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>path/to/default.css" /> Code: div #header{ which will now work, if your images directory is at the same level as your css file. Taff
[eluser]wiredesignz[/eluser]
Everything is referenced to index.php, the path does not change no matter what controller you load. However it appears you are using a sub-directory `/my-app/` so if index.php and images is in `/my-app/` the url is simply `images/header_logo.jpg`, using ../ asks the browser to reference the directory above `my-app`, using / alone asks the browser to reference your document root.
[eluser]Seppo[/eluser]
If you are setting the property in the stylesheet, the path reference is from the stylesheet folder. So, if you have "images" and "css" as folders inside the same folder, the correct way to do it is ../images/header_logo.jpg If it doesn't work, I recommend you to use Firefox + Firebug, go to the "Net" tab and there you should see what URL is your browser attempting to load. |
Welcome Guest, Not a member yet? Register Sign In |