There are two interesting blog background effects that we will consider here -
1. A hard edge effect.
2. A soft edge effect.

Both these blog background effects can be achieved with a simple PNG gradient background. PNG will allow you to create a transparent gradient that you can then apply to any background color.

The Hard Edge Blog Background Effect.

1. Create a transparent gradient in your image editing tool of choice (e.g. PhotoShop). Alternatively you can just download and edit this pre-made transparent gradient.



2. Make sure that the gradient is dark towards the inner edge and transparent towards the outer edge. The center of your image should exactly match the fixed-width of your blog.

   For example, the png above has a center of 930 pixels which is the total width of my WordPress blog. The total width of the image is 1130 pixels, with a gradient width of 100 pixels on each side.

3. Include the following into your blog theme CSS file -

   body {	
   	background: #999999 url('your-gradient.png') top center repeat-y; border: none;
   }
   ";

   This sets the background color to gray (#999999). You can set this to any color you want. For example, the blog screen-shot below has a hard-edge background effect with a white background.

The Soft Edge Blog Background Effect

The soft-edge background effect can be a bit more complex to achieve because the gradient is applied on top of your blog rather than outside it, as with the hard-edge background effect.

1. Create a transparent gradient in your image editing tool of choice (e.g. PhotoShop). Alternatively you can just download and edit this pre-made transparent gradient.



2. Make sure that the gradient is dark towards the outer edge and transparent towards the inner edge. The total width of your image should exactly match the fixed-width of your blog.

   For example, the png above has a total width of 930 pixels which is the total width of my WordPress blog.

3. Include the following into your blog theme CSS file -

   #rap {
   	background: url('your_gradient.png') top center repeat-y; border: none; 
   }
    
   body {
   	background-color:#000000;
   };

   This assumes that rap is the outermost container of your blog.

4. If you have image areas on the edge of your blog, you will have to apply your gradient png separately on top of these images. In particular, you may have to apply your png onto your header image. To do this, first create a header-overlay class in your blog style sheet.

   .header-overlay {
   	position:absolute;
   	width:[enter header width]px; 
           height:[enter header height]px;
   	background: url('your_gradient.png') top left repeat-y; border: none; 
   	overflow: hidden;	
   }

5. Include the above header-overlay area into your blog header. Go into the header.php file of your WordPress theme and look for the header image container. Add your header-overlay right below the header container.

       <div id="header">
   	<div class="header-overlay"></div>    
                 <!-- Header container contents HERE -->
       </div> <!-- End header container -->

   Note – it is important that the header container is set to relative positioning in your blog style-sheets.

   #header{
   	position:relative;
   }

Related Articles