Cogzidel Templates Blog

In this article we will show you how to place a background image for the heading which appears out of the container.

STEP 1.

Just slice the background image in JPG or PNG format . And place it in the images folder.

STEP 2.

Now in CSS use the following background property for heading tags h2 or h3 whatever you like

{code type=css}
#page_column_1 h2 {
background: url(../images/bg_h2_sad.jpg) no-repeat 0 0;
padding: 15px 0 12px 30px;
margin: 0 0 0 -21px;
overflow: auto;
}

{/code}

• Here is the trick,
• Main thing what we need to do here is using negative value for margin left property. margin: 0 0 0 -21px; this negative value will place your h2 element out of the left column.
• padding:15px 0 0 30px; Padding left values will move your text content inside of the left column. And top and bottom padding values will helps to show the full size of the background image.
• overflow : auto; is helpful to show your background image looks perfectly in IE6 browser too. Because sometimes overflowing elements will not display in IE browsers

STEP 3.

HTML Code.

{code type=html}

Member Login

{/code}

Please click the following link for the live demo:

http://demo.cogzideltemplates.com/templates/dolphin/dolphin7.0.4/index.php?skin=skin003

This entry was posted on Saturday, July 4th, 2009 at 2:09 am and is filed under CSS Tips. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.