Background repeat one side of the layout, content centered

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Background repeat one side of the layout, content centered

Post 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">&nbsp;</td>
<td class="center"><div>Table method : This space must be centered</div></td>
<td class="right">&nbsp;</td>
</tr>
</table>

<div class="div-container">
<div class="left">&nbsp;</div>
<div class="center">Div method : This space must be centered</div>
<div class="right">&nbsp;</div>
</div>

User avatar
Jade
Forum Regular
Posts: 908
Joined: Sun Dec 29, 2002 5:40 pm
Location: VA

Re: Background repeat one side of the layout, content center

Post 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;
}
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Background repeat one side of the layout, content center

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: Background repeat one side of the layout, content center

Post 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">&nbsp;</td>
				<td class="center"><div>Table method</div></td>
				<td class="right">&nbsp;</td>
			</tr>
		</table>

		<div class="div-container">
			<div class="left">&nbsp;</div>
			<div class="center">Div display:table CSS method | Does not work in IE6/7</div>
			<div class="right">&nbsp;</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.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Background repeat one side of the layout, content center

Post 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.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: Background repeat one side of the layout, content center

Post by Sindarin »

There's no "left" property in CSS.
Wait, what? http://www.w3schools.com/css/pr_pos_left.asp
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Background repeat one side of the layout, content center

Post by pickle »

Ya - there's a "left" property.
No - there's no reason I chose "margin-left" over "left"
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Background repeat one side of the layout, content center

Post by social_experiment »

Ah, my bad. :)
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
Post Reply