help with a layout background code

[ModernRevolutions]

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

[thetestingsite]

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


Hope this helps.

[TheJoshMan]

Down as in vertically?

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


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

[ModernRevolutions]

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

[thetestingsite]

change:



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


to:



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]

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

[TheJoshMan]

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



.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:



.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]

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



.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:



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

[TheJoshMan]

Shouldn't this post technically be under "CSS"?

[thetestingsite]

Shouldn't this post technically be under "CSS"?

You are correct, moved thread. I swear, it's been on of those days today.

[TheJoshMan]

HaHa! You don't even know the HALF of "one of those days" till you've had one like mine has been!!! LOL