Welcome Guest, Not a member yet? Register   Sign In
defining correct url for css background property
#1

[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
#2

[eluser]bapobap[/eluser]
It should be something like this?
Code:
/public_html/
    /stylesheets

/system/
     /application/
        /controllers/

You should reference it as (/images/), instead of ../images I think?
#3

[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{
  background: url(<?php echo base_url();?>/images/header_logo.jpg);
}

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" />
and then in your css file then you can use

Code:
div #header{
  background: url(/images/header_logo.jpg);
}

which will now work, if your images directory is at the same level as your css file.

Taff
#4

[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.
#5

[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.




Theme © iAndrew 2016 - Forum software by © MyBB