Hello,


I'm trying to get my background image to repeat x and y and go to the left, right, and bottom of the screen regardless of what screen res someone uses.

Right now there is a gap I can't fix.

I can use -20px left and right margins to make it look right on my screen res but that doesn't work at the bottom of the page.

How do I make the background image repeat off the page regardless of screen res?

here is a link to my site
http://www.pgzz.gamerunion.com

here is the css code in question.

#container{
background: url(images/bodybackground.jpg) repeat;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin: 0%;
}

I've tried everything I can think of.

Thanks for the help.

Try applying the background image to the body
Just add this to your css:

body{
background: url(images/bodybackground.jpg) repeat;
}

I've tried that it just replaces the background image I have in the body.

Do you know of a way I can have two background images in the body and set one on top of the other?

Right now i have three images on top of each other
sky, grass, and dirt in body
sun and clouds in sun
and flowers in flowers

when I add a 2nd background image to body it replaces it. The sun and flowers are still there but I don't know how to place the sky, grass, and dirt image on top of the one that repeats both x and y.

body{
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
background: url(images/header_bg.jpg) repeat-x;
text-align: center;
height: 248px;
}

h1{
padding: 0px; margin: 0px;
}
#sun {
background-image:url(images/sun.gif)
margin-top: 0px;
text-align: left;
padding-bottom: 27px;
}
#flowers {
background: url(images/flowers.gif) repeat-x;
margin-top: 10px;
margin-left: 0px;
height: 50px;
}

I see now. Okay, here is what I would do.

Change your body to this in your css

body{
	padding: 0; 
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	background: url(images/bodybackground.jpg) repeat;
	text-align: center;
}

wrap your sun and flower divs in a header div like this:

<div id="header">
    <div id=sun>
        <img src="images/sun.gif" width="800" height="130" alt="Sun Shine">
        <div id=flowers><img src="images/flowers.gif"></div>
    </div>
</div>

Add a style for #header in your css like this:

#header{
	background:url(images/header_bg.jpg) repeat-x;
}

You are AMAZING!!!!

Thanks so much for the help!!!

You really don't need the repeat property as that IS the default