How do I link a background image in a css file

I am having path issues with css

div#inner-header {
background:url("images/global/header-bg.jpg") no-repeat scroll center top transparent;
margin:0 auto;

the images dir is located in the css directory but the files are not linking on the site.

View Replies:
kino replied on at Permalink Reply
you try

div#inner-header {
background:url(images/global/header-bg.jpg) no-repeat scroll center top transparent;
margin:0 auto;
aaron replied on at Permalink Reply
Yea I did and it didn't work either

Here is the link none of the css images are working
rullingen replied on at Permalink Reply
Same Problem, any help?
Arismoon replied on at Permalink Reply
Yeah same here.
Saxafrass replied on at Permalink Reply
Same problem. Could really use an answer. Also just started with concrete. Coming from SilverStripe. Seems nice so far, just wish I could figure out what seems to be an easy problem. I've been staring at it for hours to no avail though so any thoughts wold be much appreciated.
jbx replied on at Permalink Reply
If your images folder is inside the css folder (why?) and I assume that your css folder is inside your theme folder, then your link should be url(css/images/etc).

In C5, when you include your css file correctly ( <?php echo $this->getStyleSheet() ?>/css/myStyles.css ) then all urls will start from the root of your theme directory.

SVijay replied on at Permalink Reply
Hi potionMaker,

Make sure whether you have included the CSS file in head tag and make sure the image path.

As jbx said you may given a wrong image path.
Saxafrass replied on at Permalink Reply
My .css file is in my 'themes' folder. There is also an 'images' folder in my 'themes' folder. This is what I have written in the head - <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />. It seems to work as I can control background and text color and positioning from within my .css file. The problem lies specifically in calling a background image - #header {background: url(images/hearderBack.jpg);} I too have also tried adding !Important to the end of it to no avail. Thanks for the fast responses.
jbx replied on at Permalink Reply
Did you copy and paste the css? Because you have a spelling mistake in the image name. Could it be that simple??

What you're doing looks absolutely correct to me. Do you have any content in the header div? If not, then it will collapse and not have a height, so you wont see it.

Do you have a live link I could see? Could solve it easy then!

Also, try using Firebug addon in Firefox. Look in the net panel and you wil see all the images and resources it tries to load and where it is looking for it. Look for a red 404 on your background image.

Posting me a link will be the quickest way to solve it tho...

SVijay replied on at Permalink Reply
Hi potionMaker,

try this
#page #header{ background: url(images/hearderBack.jpg); }


#header{ background: url(images/hearderBack.jpg); }
Saxafrass replied on at Permalink Reply
thanks for responses guys. the spelling was a mistake but not "the" mistake. I was using a program called CSS Edit which I'm normally quite happy with, but for some reason was not displaying any background images in the live preview. Only seems to do it with concrete sites. Anyway not a big deal once I realized the images were there, I just couldn't see them. Thanks again.
weegrom replied on at Permalink Reply
Here's the fix if you're working locally using CSSedit and concrete5.

In your header.php file, call your stylesheets like this:

href="<?php echo $this->getThemePath(); ?>/main.css"

Instead of like this:

href="<?php echo $this->getStyleSheet('main.css')?>"

The later somehow changes the image links in the stylesheet from relative to absolute, which CSSedit seems to have issues with.

Happy coding!
webhostaz replied on at Permalink Reply
How does that solution play with template customization though I wonder? Do the main and typography css files still parse out to allow end-user customization if you call them in this fashion?
12345j replied on at Permalink Reply
you can't
garyam replied on at Permalink Reply
Awesome! That fixed my mixed http & https warnings user's were getting. I guess the theme we were used the incorrect way. Thanks a bunch!
maartenfb replied on at Permalink Reply
dzjs...your suggestion fixed it for me.
Couldn't believe this was happening...I can store away my rope again...
jwebolution replied on at Permalink Reply
This is what I did and it worked:

Let's say your theme's folder is "MyTheme"...

Go to /MyTheme there you will find a css folder, place your css file there.
In /MyTheme you will also find an image folder, place your image files there.
then on the css file, you can say: background:url('../images/my-image.gif') etc.

Finally, include your css file in your MyTheme/elements/header.php. To include the css on the header, you can say: <link rel="stylesheet" type="text/css" href="<?php echo $this->getThemePath()?>/css/my-style.css" />

Hope that helps,

m1akids replied on at Permalink Reply
I know this is a little late (perhaps 4 yrs late) but I thought I would throw my 2 cents in just in case someone else came across this and none of the suggestions above didn't work. I am converting a html template to a theme and the css also had a background-image property. The only way I could get it to work was to add the themes directory to the url. Example:

There were also some js files that linked to css files and I had to do the same thing to them
global: { href:'/themes/Ion/css/styles.css' }

I don't know what has changed since the OP's original but this was the only solution I found that worked.