5 CSS Methods to Style a Block with Background

Method 1: Big background image

This method uses one big image as the background, as you all know, there is fixed height. It will work perfectly if the content inside the block will not going to change.

<style type="text/css">
	.block {width:330px; height:209px; background: url(huge.jpg) no-repeat 0 0;}
	P {width:280px; margin:0 auto 0 auto;}
	h2 {padding:25px 0 0 25px; font-size:16px; margin:0;}
</style>

<div>
	<h2>Header</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

The good:

• Quickest way to build, less html

The bad:

• The image file size will be pretty big (depend on the complexity and quality of the image)
• No flexibility because the size of the block and background are fixed, you will have to resize the background to accomodate the length of the content.

Method 2: Header, Body and Footer

This method is pretty common. Basically, we have to divide the block into header, body and footer. The header and footer will have the background images and for the body it will have an image that tiles to y-axis.

<style type="text/css">
	body {font-family:arial; font-size:14px;}
	.header {width:330px; height:38px; background: url(block_header.jpg) no-repeat 0 0;}
	.body {width:330px; background: url(block_tile.jpg) repeat-y 0 0;}
	.footer {width:330px; height:36px; background: url(block_footer.jpg) no-repeat 0 0;}
	h2 {padding:0 0 0 25px; font-size:16px; margin:0;}
	p {width:280px; margin:0 auto;}
</style>

<div></div>
<div>
	<h2>Header</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div></div>

The good:

• Used to be the tradisional way to style a box, guarantee to work across different browsers

The bad:

• The color for the body must be plain, you can’t use gradient background.
• extra html code for footer

Method 3: Header and Body

This method is quite similar to method 2 except it’s cleaner and more compact. However, we need to make sure the body background image is long enough to fit the content.

<style type="text/css">
	body {font-family:arial; font-size:14px;}
	.block {width:330px; background: url(block_body.jpg) repeat-y 0 bottom; padding-bottom:30px;}
	.block h2 {width:330px; height:38px; background: url(block_header.jpg) no-repeat 0 0; margin:0; padding:0 0 0 25px; line-height:4.0em; font-size:16px;}
	P {width:280px; margin:0 auto;}
</style>

<div>
	<h2>Header</h2>
	<p>This is my favourite solution. I like to use this solution because all the html codes are there for a purpose. For example the H2 for heading and also use to set the header background image. The only drawback would be the background image for the body, the size can be rather big and you have to make sure it's long enough.</p>
</div>

The good:

• Much more simple, compact and less html code

The bad:

• The background image for body has to be pretty long to accomodate long content, which leads to large file size

Method 4: Pure CSS3

Some of the websites are using this because they don’t care about IE . However, using CSS3 to make block looks good does have its limitation, well you can only change the border, drop shadow and gradient.

<style type="text/css">
	body {font-family:arial; font-size:14px;}
	.block {width:330px; padding-bottom:30px;}
	.block h2 {margin:0; padding:10px 0 0 15px;font-size:16px;}
	p {width:300px; margin:0 auto;}
	.effect {border:3px solid #666; -moz-box-shadow: 0px 0px 3px #333; -webkit-box-shadow: 3px 3px 3px #333; -moz-border-radius: 15px; -webkit-border-radius: 15px; background: -moz-linear-gradient(center bottom , #CACACA 9%, #ECECEC 92%) repeat scroll 0 0 transparent; background: -webkit-gradient(linear, left bottom, left top, color-stop(0.09, rgb(202,202,202)), color-stop(0.92, rgb(236,236,236)))}
</style>

<div>
	<h2>Header</h2>
	<p>Note: You need latest version of Firefox, Chrome or Safari to see this. I guess this would become one of the famous solution soon. Pure CSS Solution, no extra html code, just styling. Though the CSS3 standards are not implemented by all browsers some of the websites have already started using it. There are a lot of hacks for IE to make it read CSS3.</p>
</div>

The good:

• This could be the simplest solution, by using CSS3.
• Firefox, chrome and safari support some of the CSS3 and there are hacks for IE6, 7 and 8 as well
• No images are needed

The bad:

• Limited style, rounded corner/drop shadow and gradient

Method 5: Pure CSS3 with Multi Background

This method is quite similar to Method 3 except instead of putting the image in H2, it uses multiple background in the DIV. The greatest problem is – not all the browsers support multiple background yet.

<style type="text/css">
	body {font-family:arial; font-size:14px;}
	.block {width:330px; padding-bottom:30px;background: url(block_header.jpg) top left no-repeat, url(block_body.jpg)  0 bottom no-repeat; padding:10px 10px 20px 10px;}
	.block h2 {margin:0; padding:10px 0 0 25px;font-size:16px;}
	p {width:280px; margin:0 auto;}
</style>

<div>
	<h2>Header</h2>
	<p>Note: You need latest version of Firefox, Chrome or Safari to see this. I guess this would become one of the famous solution soon. Pure CSS Solution, no extra html code, just styling. Though the CSS3 standards are not implemented by all browsers some of the websites have already started using it. There are a lot of hacks for IE to make it read CSS3.</p>
</div>

The good:

• Much more simple, compact and less html code

The bad:

• It has the same drawback like method 2. The background image size will be pretty big (depend on the complexity and quality of the image)
• Multi background CSS3 standard is not widely supported by most modern browsers