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!

View Replies:
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
Put Site url & css lines here. So that I can check it.

Rony
sillum replied on at Permalink Reply
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.
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
Use <style type="text/css">@import "<?php echo $this->getThemePath()?>/main.css";</style>

I think it will solve your problem

Rony
sillum replied on at Permalink Reply
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.
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
<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
sillum replied on at Permalink Reply
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... :-)
MoonGrab replied on at Permalink Reply
MoonGrab
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.
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
You can use display:block if you don't want to put the height.

Rony
Steevb replied on at Permalink Reply
Steevb
You might want to set a 'min-height', 'height:auto' and apply 'overflow:hidden' to the div.