help with a layout background code

**ModernRevolutions** · 07-19-2008, 11:44 PM

how do you make a background pic repeat down only? and not all directions thanks

**thetestingsite** · 07-19-2008, 11:48 PM

Code:

<style type="text/css">
 BODY {
  background: url('bg.png') repeat-x;
 }
</style>

Hope this helps.

**TheJoshMan** · 07-19-2008, 11:59 PM

Down as in vertically?

I thought repeat-y was vertical whereas repeat-x was horizontal?

Code:

<style type="text/css">
 BODY {
  background: url('bg.png') repeat-y;
 }
</style>

**ModernRevolutions** · 07-20-2008, 12:06 AM

neither worked :/ here is the site link www.dynamic.modernrevolutions.net

**thetestingsite** · 07-20-2008, 12:16 AM

change:

Code:

background-image:url(http://i302.photobucket.com/albums/nn86/kendruh326/dynamicpart2.png)repeat-y;

to:

Code:

background:url(http://i302.photobucket.com/albums/nn86/kendruh326/dynamicpart2.png)repeat-y;

I thought repeat-y was vertical whereas repeat-x was horizontal?

You're right, I just got them confused (which I always seem to do).

**ModernRevolutions** · 07-20-2008, 12:22 AM

thanks SO MUCH!!! now i have 1 qestion. why is the page so wide? like it goes forever...?

**TheJoshMan** · 07-20-2008, 01:28 AM

You're defining your width to the "Content" div as 250% see below:

Code:

.content {
background:#FFFFFF none repeat scroll 0% 0%;
color:#FFFFFF;
float:left;
font-family:arial;
font-size:10px;
font-weight:normal;
line-height:13px;
padding:0px;
text-align:left;
text-transform:none;
width:250%;
}

Change it to 100%, also... A good rule of thumb would be to change "scroll" to "auto". So all together would be:

Code:

.content {
background:#FFFFFF none repeat auto 0% 0%;
color:#FFFFFF;
float:left;
font-family:arial;
font-size:10px;
font-weight:normal;
line-height:13px;
padding:0px;
text-align:left;
text-transform:none;
width:100%;
}

Hope this helps!

**TheJoshMan** · 07-20-2008, 01:35 AM

Just noticed that with that fix you have some of the original white background showing through... So to fix that change this:

Code:

.content {
background:#FFFFFF none repeat scroll 0% 0%;
color:#FFFFFF;
float:left;
font-family:arial;
font-size:10px;
font-weight:normal;
line-height:13px;
padding:0px;
text-align:left;
text-transform:none;
width:250%;
}

Just change that to #3d3d3d as you have the original background color set to. So the entire fixed code would be:

Code:

.content {
background:#3D3D3D none repeat auto 0% 0%;
color:#FFFFFF;
float:left;
font-family:arial;
font-size:10px;
font-weight:normal;
line-height:13px;
padding:0px;
text-align:left;
text-transform:none;
width:100%;
}