5 CSS Methods to Style a Block with Background

Introduction

There are a lot of solutions to style a block with background. Few days ago, I was assigned to work on bits and pieces of an almost completed website, I was fixing some layout bugs in IEs and then I discovered that the background of the content was a big background image, and different height for different page! Well, to be honest, that's the quickest way but it brings more trouble when we fit in more content in it, I ended up have to resize most of them to fit the new content. It was a nightmare and too late to fix it, the website has to go live.

Due to that incident, I was inspired to make this post - find out the different ways to style up a block with background, the advantages and the drawbacks. I hope this post will benefit all of you, however if I made any mistake, please point it out, or if you have better way to style, do let me know as well.

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 class="block">
	<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 class="header"></div>
<div class="body">
	<h2>Header</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="footer"></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 class="block">
	<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 class="block effect">
	<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 class="block effect">
	<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

Conclusion

Yep, I guess these are the most common methods to style a block with background. It all depends on the project you work on, method one cis the quickest way but if you want more flexibility you can choose other methods. Alrighty, if you have other ineteresting methods, do let me know. :)

Follow me on Twitter or subscribe my RSS for more tips and tricks!

AdvertisementUnlock the key of your success for 640-822 dumps exams & 642-611 by using our latest HP0-M38 and 70-649 prep resources and testking 70-662.