How to: CSS Methods to Style a Block with Background

more images

For web designers CSS tutorials offer many solutions to style background. The background of an image, content size, different height for different pages and such issues  make it difficult to manage the pages. They are required to work on bits and pieces of an almost complete website. Moreover, its important to make sure that the style fits in most of the browsers. In order to generate a perfect layout web designers need to use the best CSS techniques available. We got across some cool methods to style a Block with beautiful Background.  Each of the methods have their own pros and cons. These CSS methods provide the quickest way, and reduces HTML code providing some of the best ways to style a block.

Big background image

The method uses a big image as the background. There is fixed height. It will work perfectly when the content inside the block will not change. In this case only one background image is used. The greatest drawback is the flexibility since the height is fixed. This is not a feasible method if you have more content in the background. This is the fastest way to style a block and requires less html code. Moreover, it works on different browsers.

<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>

Header, Body and Footer

The method is quite common. 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 tilts to y-axis.  It used to be the traditional way to style the box. This work across different browsers. However, in this method the color for the body must be plain and you cannot use the gradient background. Further, it also requires extra gradient background.

<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>

Header and Body

This method is more cleaner and compact. You need to ensure that the body background image is wide enough to fit the content.  It’s a simple solution using CSS3 and doesn’t require an image. However, the style will be limited to rounded corner/drop shadow and gradient

<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>

Pure CSS3

Some websites use this as you don’t care about IE. In this case you can only change the border, drop shadow and gradient. You need latest version of Firefox, Chrome or Safari. This might become one of the greatest solutions soon. The Pure CSS solution and requires no extra html code, only just styling.

<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>

Pure CSS3 with Multi Background

This Method is similar to  header and body method. The image is not put in H2 and uses multiple background in DIV. This method is simple, compact and less html code.  The most significant limitation with this method is that it needs the latest version of Chrome, Firefox and Safari.

<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>

These are the most common methods to style a block with background. It all depends on the project that you work on.

Source: queness.com