Use CSS To Banner

Please Visit My Profile Page To See All My Blogs Thanks 

Http://Www.Blogger.Com/Profile/08427350034167098841

Centering a Banner
By default, the banner is positioned at 15 pixels from both the top and right banner area. If you would like edit the position of the banner image to the center of banner area, at Design > Custom CSS, you can enter the following CSS:


#banner { background-position: center; }


Removing Banner Padding
TypePad automatically applies a 15 pixel banner to border to each side of the banner. If you want to use full banner area, you can remove the padding. Go to Design > Custom CSS and paste in the following code:


#banner { height: XXXpx; background-position:0px 0px; } 
#banner-header a { height: XXXpx; }


Please note that you need to replace XXX with your banner's actual height.
Displaying Title and Description Text over a banner image
If you would like to use a banner as a background image but would like to retain your blog Name and Description text, you can use the following code. Note that you will need to upload the banner image file via Library > File Manager and edit the URL and height to match your specific banner.




#banner { 
background-image: url(http://example.typepad.com/folder/banner.jpg); 
height: XXXpx; 
background-position:0px 0px; 
}




#banner-header a { 
height: XXXpx; 
}


Replace XXX with the correct banner height and "http://example.typepad.com/folder/banner.jpg" with the URL for your banner image.
Adding banner image to an Advanced Template design
If you're using an Advanced Template, you'll need edit the Theme Stylesheet Template using CSS to display an image banner on your blog.
First, go to Library > File Manager and upload the image you want to use for your banner there. Click through the file and copy the URL from your browser's address bar.
After uploading the banner image to your File Manager, you can add the CSS code for your image banner to your Stylesheet template. At Design > Templates > Theme Stylesheet, look for the heading:
/* banner styling */
The code within this section will need to be replaced with the code:


#banner
{
background: url(http://example.typepad.com/folder/banner.gif) no-repeat;
height: XXXpx;
}


#banner-inner { overflow: visible; padding: 0; }


#banner-header
{
position: absolute;
left: 0;
top: 0;
width: 100%;
margin: 0;
padding: 0;
}


#banner-header a
{
display: block;
left: 0;
top: 0;
height: XXXpx;
text-indent: -1000em;
}


#banner-description
{
overflow: hidden;
width: 0;
height: 0;
margin: 0;
padding: 0;
text-indent: -1000em;
}




Replace the background image URL "http://example.typepad.com/folder/banner.gif" with your own and set the XXXpx height to the exact height of your image banner.
Please note you can also integrate the other CSS tips above into the Theme Stylesheet by adding the attributes to the classes above. To center the banner, for example, you can add background-position: center; to the #banner class in the Theme Stylesheet