Page 1 of 1
Background repeat one side of the layout, content centered
Posted: Thu Jun 02, 2011 3:19 am
by Sindarin
How can I repeat endlessly a background color/image only on one side of my site layout and keep the content centered?
The best method seems to be with tables as it will work even in IE6, however is there a method to do this without tables and javascript and be working in at least IE7+?
The method with divs/display:table does not work in IE at all,
Code: Select all
<style type="text/css">
*{
margin:0;
padding:0;
}
/* table method */
.table-container{
margin-top:20px;
border:0;
border-collapse:collapse;
width:100%;
height:100px;
}
.table-container .left{
background:transparent;
}
.table-container .center{
width:960px;
background:#ddd;
vertical-align:top;
}
.table-container .center div{
margin:0 auto;
width:960px;
}
.table-container .right{
width:auto;
background:#ccc;
}
/* div method */
.div-container{
display:table;
margin-top:20px;
border:0;
width:100%;
height:100px;
}
.div-container .left{
display:table-cell;
background:transparent;
}
.div-container .center{
display:table-cell;
width:960px;
margin:0 auto;
background:#ddd;
vertical-align:top;
}
.div-container .right{
display:table-cell;
width:auto;
background:#ccc;
}
</style>
<table class="table-container">
<tr>
<td class="left"> </td>
<td class="center"><div>Table method : This space must be centered</div></td>
<td class="right"> </td>
</tr>
</table>
<div class="div-container">
<div class="left"> </div>
<div class="center">Div method : This space must be centered</div>
<div class="right"> </div>
</div>
Re: Background repeat one side of the layout, content center
Posted: Thu Jun 02, 2011 10:18 am
by Jade
Code: Select all
body {
/*center the content */
margin-left: auto;
margin-right: auto;
/*set the background image*/
background-image:url('your_image_name_here.jpg');
/* position the background */
background-position: top left;
/* repeat the background only on the Y access */
background-repeat: repeat-y;
}
Re: Background repeat one side of the layout, content center
Posted: Fri Jun 03, 2011 3:28 pm
by pickle
~ Jade - that will repeat over the entire page
I haven't tried this, but what if you put a div underneath your main content div with these styles:
Code: Select all
background: #colour url(image.ext) repeat-y left top;
right: 0s
margin-left: 50%;
position: absolute;
z-index: 1;
Then just style your content so its overtop.
Re: Background repeat one side of the layout, content center
Posted: Sat Jun 04, 2011 2:45 pm
by Sindarin
margin-left: 50%;
pickle, is there any reason you used margin-left instead of "left"? (I just wanna double check if I am missing something)
Okay I tried 3 different methods,
Table method seemed to work flawlessly across IE6 and modern browsers, Div with display:table didn't work for me on IE6 and 7.
Lastly the Absolutely positioned DIV method seemed to work fine in IE6/7 plus modern browsers, the only problem I found was when the user zoomed in/out in IE 6/7/8 Safari and Chrome it broke the layout some. (but I can't say that with certainty as I think I zoom is yet not flawless?) Also it had the best behavior when the window was resized, meaning the absolute positioned background did not force a scrollbar but the content did when it was hidden past the minimum width.
Code: Select all
<!doctype html>
<html>
<head>
<title>test</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font:12px Arial,Helvetica,sans-serif;
cursor:default;
text-align:center; /* IE */
height:100%;
width:100%;
}
/* table method */
.table-container{
margin-top:20px;
border:0;
border-collapse:collapse;
width:100%;
height:100px;
text-align:left;
}
.table-container .left{
background:transparent;
}
.table-container .center{
width:960px;
background:#ddd;
vertical-align:top;
}
.table-container .center div{
margin:0 auto;
width:960px;
}
.table-container .right{
width:auto;
background:#ccc;
}
/* div method */
.div-container{
display:table;
margin-top:20px;
border:0;
width:100%;
height:100px;
text-align:left;
}
.div-container .left{
display:table-cell;
background:transparent;
}
.div-container .center{
display:table-cell;
width:960px;
margin:0 auto;
background:#ddd;
vertical-align:top;
}
.div-container .center div{
display:table-cell;
margin:0 auto;
width:960px;
}
.div-container .right{
display:table-cell;
width:auto;
background:#ccc;
}
/* div method (absolute positioning) */
.div-abs-container{
position:static;
margin:auto;
margin-top:16px;
width:960px;
height:100px;
text-align:left;
}
.div-abs-container .inner{
position:relative;
z-index:1;
width:960px;
height:100px;
background:#ddd;
text-align:left;
}
.div-abs-background{
position:absolute;
top:256px;
right:0;
z-index:0;
width:50%;
height:100px;
background:#ccc;
}
</style>
</head>
<body>
<table class="table-container">
<tr>
<td class="left"> </td>
<td class="center"><div>Table method</div></td>
<td class="right"> </td>
</tr>
</table>
<div class="div-container">
<div class="left"> </div>
<div class="center">Div display:table CSS method | Does not work in IE6/7</div>
<div class="right"> </div>
</div>
<div class="div-abs-container">
<div class="inner">Div method with absolute positioning | Works in IE6+</div>
<div class="div-abs-background"></div>
</div>
</body>
<html>
Please suggest any ideas if you have to improve the 3rd method.
Re: Background repeat one side of the layout, content center
Posted: Wed Jun 08, 2011 12:45 pm
by social_experiment
Sindarin wrote:is there any reason you used margin-left instead of "left"? (I just wanna double check if I am missing something)
There's no "left" property in CSS. The margin-left property adds spacing on the left outer edge of the element.
Re: Background repeat one side of the layout, content center
Posted: Thu Jun 09, 2011 12:00 pm
by Sindarin
There's no "left" property in CSS.
Wait, what?
http://www.w3schools.com/css/pr_pos_left.asp
Re: Background repeat one side of the layout, content center
Posted: Thu Jun 09, 2011 4:08 pm
by pickle
Ya - there's a "left" property.
No - there's no reason I chose "margin-left" over "left"
Re: Background repeat one side of the layout, content center
Posted: Fri Jun 10, 2011 2:30 am
by social_experiment
Ah, my bad.
