How do I link a background image in a css file
Permalink
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;
width:1000px;
}
the images dir is located in the css directory but the files are not linking on the site.
div#inner-header {
background:url("images/global/header-bg.jpg") no-repeat scroll center top transparent;
margin:0 auto;
width:1000px;
}
the images dir is located in the css directory but the files are not linking on the site.
Yea I did and it didn't work either
Here is the link none of the css images are working
http://c5.dealercontrol.net/
Here is the link none of the css images are working
http://c5.dealercontrol.net/
Same Problem, any help?
Yeah same here.
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.
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.
Jon
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.
Jon
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.
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.
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.
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...
Jon
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...
Jon
Hi potionMaker,
try this
instead
try this
#page #header{ background: url(images/hearderBack.jpg); }instead
#header{ background: url(images/hearderBack.jpg); }
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.
Here's the fix if you're working locally using CSSedit and concrete5.
In your header.php file, call your stylesheets like this:
Instead of like this:
The later somehow changes the image links in the stylesheet from relative to absolute, which CSSedit seems to have issues with.
Happy coding!
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!
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?
you can't
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!
Gary
Gary
dzjs...your suggestion fixed it for me.
Couldn't believe this was happening...I can store away my rope again...
Couldn't believe this was happening...I can store away my rope again...
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,
-Hamlet
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,
-Hamlet
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
Example:
I don't know what has changed since the OP's original but this was the only solution I found that worked.
background-image:url("/themes/Ion/images/banner.jpg");
There were also some js files that linked to css files and I had to do the same thing to them
Example:
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.
div#inner-header {
background:url(images/global/header-bg.jpg) no-repeat scroll center top transparent;
margin:0 auto;
width:1000px;
}