Achieving this simple layout in CSS

Basically, this is what I’ve got currently:


#body {
	width: 100%;
	background:url(images/bg_body_top.png) repeat-x;
	padding-top: 45px;
	padding-bottom: 45px;
}

#content{
	width:960px;
	margin:0px auto;}

#body-bg-btm {
	width: 100%;
	background:url(images/bg_body_btm.png) repeat-x;
	height: 65px;
}


<div id="body">

<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia malesuada tortor, ac condimentum ante convallis pellentesque. Vestibulum in risus odio. Nulla vel metus velit.</div>

<div id="body-bg-btm"></div>

</div>

The text overlaps the background image at the top (as required) but I don’t know how to get it to overlap the background image at the bottom and depending on the amount of text entered in the content area still dynamically stretch…

e.g.

Any help would be very much appreciated!

Ok guys… Thanks to Paul helping a bloke out called ReekDog I might have solved it.


#wrapper {
	width: 100%;
}
.wraptop, wrapbase {
	width:100%;
	background:#FFF url(images/bg_body_top.png) repeat-x 0 0;
	padding:0 0;
}
.wrapbase {
	background: url(images/bg_body_btm.png) repeat-x 0 100%;
	padding:0 0;
}
.content {
	width: 960px;
	margin: auto;
	min-height:220px;
	padding: 45px;
}


<div id="wrapper">
	<div class="wraptop">
		<div class="wrapbase">
			<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus metus vehicula leo vestibulum sodales. Morbi non lectus at metus consequat suscipit. Duis eget tortor quis odio faucibus porttitor vulputate a nunc. Etiam enim nunc, feugiat ac pharetra sed, suscipit vitae purus. Aliquam pretium egestas sagittis. Vestibulum eget augue ante, et malesuada metus. Vivamus sed lectus erat. Fusce consequat ullamcorper mauris, quis viverra ante fermentum vel. Curabitur consequat leo eget justo auctor placerat. Nulla eget est tortor. Nunc accumsan leo ullamcorper urna consectetur sit amet blandit mi pretium. Maecenas adipiscing, est eu fermentum molestie, libero sapien semper est, feugiat vehicula nisi mauris vitae urna.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus metus vehicula leo vestibulum sodales. Morbi non lectus at metus consequat suscipit. Duis eget tortor quis odio faucibus porttitor vulputate a nunc. Etiam enim nunc, feugiat ac pharetra sed, suscipit vitae purus. Aliquam pretium egestas sagittis. Vestibulum eget augue ante, et malesuada metus. Vivamus sed lectus erat. Fusce consequat ullamcorper mauris, quis viverra ante fermentum vel. Curabitur consequat leo eget justo auctor placerat. Nulla eget est tortor. Nunc accumsan leo ullamcorper urna consectetur sit amet blandit mi pretium. Maecenas adipiscing, est eu fermentum molestie, libero sapien semper est, feugiat vehicula nisi mauris vitae urna.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus metus vehicula leo vestibulum sodales. Morbi non lectus at metus consequat suscipit. Duis eget tortor quis odio faucibus porttitor vulputate a nunc. Etiam enim nunc, feugiat ac pharetra sed, suscipit vitae purus. Aliquam pretium egestas sagittis. Vestibulum eget augue ante, et malesuada metus. Vivamus sed lectus erat. Fusce consequat ullamcorper mauris, quis viverra ante fermentum vel. Curabitur consequat leo eget justo auctor placerat. Nulla eget est tortor. Nunc accumsan leo ullamcorper urna consectetur sit amet blandit mi pretium. Maecenas adipiscing, est eu fermentum molestie, libero sapien semper est, feugiat vehicula nisi mauris vitae urna.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus metus vehicula leo vestibulum sodales. Morbi non lectus at metus consequat suscipit. Duis eget tortor quis odio faucibus porttitor vulputate a nunc. Etiam enim nunc, feugiat ac pharetra sed, suscipit vitae purus. Aliquam pretium egestas sagittis. Vestibulum eget augue ante, et malesuada metus. Vivamus sed lectus erat. Fusce consequat ullamcorper mauris, quis viverra ante fermentum vel. Curabitur consequat leo eget justo auctor placerat. Nulla eget est tortor. Nunc accumsan leo ullamcorper urna consectetur sit amet blandit mi pretium. Maecenas adipiscing, est eu fermentum molestie, libero sapien semper est, feugiat vehicula nisi mauris vitae urna.</div>
		</div>
	</div>
</div>

It seems to do exactly the job I want!

Hi,

Glad you got it sorted - but 2 elements should be enough to achieve that design.


#wrapper {
  background:#FFF url(images/bg_body_top.png) repeat-x 0 0;
  border: 1px solid #000
}
.content {
  background: transparent url(images/bg_body_bottom.png) repeat-x 0 100&#37;;
  padding: 20px 45px;
}

If that’s the design for the whole page you could also put the top gradient on the body element and only use one div.

@ Hilly_2005, Thanks for sharing the solution! :slight_smile:

Your code can be optimized:

Any block or block displayed box will spread wide all available width, so the 100% is not necessary.

Divs does not have any default margins or padding, so neither the padding reset is necessary.

Edit)
Cheers Mark! :slight_smile:

Me updating old tabs before posting… …maybe next time. :smiley:

Cheers Mark, and cheers Erik.

I’ll have a little playaround with both ideas and see where I get! Thanks again!