Author Topic: background image not showing [SOLVED] (Read 5374 times)

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;
   }

ks-net · « **Reply #1 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...

webgift · « **Reply #2 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;

ROUBOS · « **Reply #3 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;
}

ks-net · « **Reply #4 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

webgift · « **Reply #5 on:** May 03, 2011, 13:56:48 »

.
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

Author Topic: background image not showing [SOLVED] (Read 5374 times)

ROUBOS

background image not showing [SOLVED]

ks-net

Re: background image not showing

webgift

Re: background image not showing

ROUBOS

Re: background image not showing

ks-net

Re: background image not showing [SOLVED]

webgift

Re: background image not showing [SOLVED]