Elxis CMS Forum

Support => General => Topic started by: ROUBOS on May 02, 2011, 04:24:27

Title: background image not showing [SOLVED]
Post by: ROUBOS on May 02, 2011, 04:24:27: Hi, I tried to have two different images for my page background. It all worked fine in my index.html
Once I changed the filename to .php and prepared my template and installed it, the onlything not showing is the html background image.
It was working before it was setup as an Elxis Template.
Checked my xml file, checked everything over and over, but with no luck

Any thoughts? here's my code:

html   {
   background-image: url(../images/main_bg.jpg);
   background-repeat: repeat;
   }

body   {
   background-image: url(../images/top_bg.jpg);
   background-repeat: repeat-x;
   text-align: center;
   }
Title: Re: background image not showing
Post by: ks-net on May 02, 2011, 12:54:08: html and css background is something i have never tried...and never will try.

========================
html{

}

body {
background-image: url(../images/main_bg.jpg);
background-repeat: repeat;
text-align: center;
}

#topbg {
background-image: url(../images/top_bg.jpg);
background-repeat: repeat-x;
width: ;/*important*/
height: ;/*important*/
}

=================
<body>
<div id="topbg"> </div>
..........
....
</body>

etc...
Title: Re: background image not showing
Post by: webgift on May 02, 2011, 14:39:02: That's right ;)
You must create a div named: topbg. And at your index.php file like this:
Quote from: ks-net on May 02, 2011, 12:54:08
========================
<body>
<div id="topbg"> </div>
..........
....
</body>

etc...
we usually use the html for specifying the total => margin:0;padding:0; or outline:0;
Title: Re: background image not showing
Post by: ROUBOS on May 03, 2011, 02:38:32: thanks for the reply,
I don't want the topbg div, because it is pushing the rest of the divs like the container div below it. I want that background behind the divs.
Don't know if I'm making any sense here

EDIT>>> Fixed it.

html,body{
   background-image: url(../images/main_bg.jpg);
   background-repeat: repeat;
   text-align: center;
   margin: 0;
   padding: 0;
   height: 100%;
   font-family: "Comic Sans MS", cursive;
}

and then created a container, gave it a bg, and then created the wrapper and the rest inside it:

div#container{
   padding:0px;
   width:100%;
   background-image: url(../images/top_bg.jpg);
   background-position:top;
   background-repeat:repeat-x;
}
Title: Re: background image not showing [SOLVED]
Post by: ks-net on May 03, 2011, 13:07:25: well.. that is what we told you...
topbg was an example we did not told you to add an extra div

the only difference with my example is that you renamed topbg => container ;D
Title: Re: background image not showing [SOLVED]
Post by: webgift on May 03, 2011, 13:56:48: :D ;).
Advice : Avoid writing
background-image: url(../images/main_bg.jpg);
background-repeat: repeat;
or
background-image: url(../images/top_bg.jpg);
background-position:top;
background-repeat:repeat-x;

but
background: url(../images/main_bg.jpg) repeat 0 0 ;
or
background: url(../images/top_bg.jpg) repeat-x 0 0 ;

With that process you gain space at your final css file ;)