Cannot add background-image to css??
Permalink
Hi,
I am changing a theme to my own and want to put a background image on a div, but my document does not respond. I have tried with just html and css, it works fine. When i put the code in the theme it does not. I have access to my css document because other elements and styles works fine (ex. width, color ect.) I have also tried inline-style, but it is just won't show. I have tried with the background-image from the top div, but it won't work in this specific div. I have tried to give it another id name...
I think I am going crazy because I have done this many times on other sites, just not in C5, but other CMS, and flat HTML sites.
Please help!
I am changing a theme to my own and want to put a background image on a div, but my document does not respond. I have tried with just html and css, it works fine. When i put the code in the theme it does not. I have access to my css document because other elements and styles works fine (ex. width, color ect.) I have also tried inline-style, but it is just won't show. I have tried with the background-image from the top div, but it won't work in this specific div. I have tried to give it another id name...
I think I am going crazy because I have done this many times on other sites, just not in C5, but other CMS, and flat HTML sites.
Please help!
Thanks...
Im working on a local server right now...
Link to css is:
<style type="text/css">@import "<?php echo $this->getStyleSheet('main.css')?>";</style>
- but this is working since I can alter other elements, just not background in this specific div...
In the main.css:
#contentwrap{
background: url(img/content_wrap_bg.gif);
width: 100%;
margin-top: 30px;
}
and in the default.php:
<div id="contentwrap">
<div id="content">
<div id="left">
<?php
$a = new Area('Main');
$a->display($c);
?>
</div>
... and more code...
In the css I have also tried background-image - it does not change a thing. The other elements from the original theme has a path to the images like this (./img/filename); - I have tried this too, but it does not change anything.
Im working on a local server right now...
Link to css is:
<style type="text/css">@import "<?php echo $this->getStyleSheet('main.css')?>";</style>
- but this is working since I can alter other elements, just not background in this specific div...
In the main.css:
#contentwrap{
background: url(img/content_wrap_bg.gif);
width: 100%;
margin-top: 30px;
}
and in the default.php:
<div id="contentwrap">
<div id="content">
<div id="left">
<?php
$a = new Area('Main');
$a->display($c);
?>
</div>
... and more code...
In the css I have also tried background-image - it does not change a thing. The other elements from the original theme has a path to the images like this (./img/filename); - I have tried this too, but it does not change anything.
Use <style type="text/css">@import "<?php echo $this->getThemePath()?>/main.css";</style>
I think it will solve your problem
Rony
I think it will solve your problem
Rony
It did not work :-(
What is the difference?
I have got i working now, but only with a fixed height?? If I remove the height it disapear? And it is not because I do not have any content in my div. The point of the picture is not the same if I have to have a fixed height.
What is the difference?
I have got i working now, but only with a fixed height?? If I remove the height it disapear? And it is not because I do not have any content in my div. The point of the picture is not the same if I have to have a fixed height.
<style type="text/css">@import "<?php echo $this->getStyleSheet('main.css')?>";</style>
This will cached your style but the one that I've given will parse instantly.
if you are aware about firebug, just inspect it and check whether the image path is okay.
Rony
This will cached your style but the one that I've given will parse instantly.
if you are aware about firebug, just inspect it and check whether the image path is okay.
Rony
Ok, thanks... I think I have it working now - I could fix it with a div style="clear:both;">
But the other one with the path to css, I wouldn't have figured that out :-) Thank you very much... :-)
But the other one with the path to css, I wouldn't have figured that out :-) Thank you very much... :-)
Rony's way (without getStyleSheet) would require you to rewrite the paths to your images so that they are relative to your CSS.
Example file structure:
/themes/mytheme/css/main.css
/themes/mytheme/img/content_wrap_bg.gif
The getStyleSheet function should be used without brackets, exactly like you did.
Rony's way would require you to define your paths like so:
#contentwrap{
background: url("../img/content_wrap_bg.gif");
So that's the difference. One more thing, don't ever use @import, it's a godawful way to display your stylesheets (http://www.stevesouders.com/blog/2009/04/09/dont-use-import/).
Anyway, please provide a link to your website, that would clarify everything.
Example file structure:
/themes/mytheme/css/main.css
/themes/mytheme/img/content_wrap_bg.gif
The getStyleSheet function should be used without brackets, exactly like you did.
Rony's way would require you to define your paths like so:
#contentwrap{
background: url("../img/content_wrap_bg.gif");
So that's the difference. One more thing, don't ever use @import, it's a godawful way to display your stylesheets (http://www.stevesouders.com/blog/2009/04/09/dont-use-import/).
Anyway, please provide a link to your website, that would clarify everything.
You can use display:block if you don't want to put the height.
Rony
Rony
You might want to set a 'min-height', 'height:auto' and apply 'overflow:hidden' to the div.
Rony