Tuesday, 2. October 2007, 20:00:20
It's quite simple to change your blog banner with most of the blog themes available.
Sleek Shady Beta is no exception.
The default banners are
920 pixels horizontally and
170 pixels vertically. You should scale and crop the image you want to use as a banner to that size. You can make a smaller banner too if you want to. In my case, I made a transparent GIF image of Dr. Launch, drawn by
Freek Zijlmans and used really simple CSS to put it in front of the default banner. The advantage of my method is that you can change your theme as much as you want and your banner will still look like it should.
So how do you change your banner image? By editing the
custom stylesheet for your account. The custom stylesheet
editor can be found by following these instructions:
- Go to your account
- Click Design in the ACCOUNT NAVIGATION sidebar
- Click the custom stylesheet link from the line below the Select a design text
You're now looking at the custom stylesheet editor. You're supposed to add CSS code to it to make modifications to your blog design. So how do you add a banner image of the size
920 x 170 to your design? By adding the following code to your custom stylesheet:
#top2 {
background:url(http://yourwebsite.com/yourdirectory/yourbanner.png);
}Change the address in the code to the address to your banner image. This only works properly if your background image is 920 x 170.
But if you'd like to do something a bit more advanced, like I did with my banner image, you can do so too:
#top2 {
background-image:url(http://yourwebsite.com/yourdirectory/yourimage.gif);
background-position:bottom right;
background-repeat:no-repeat;
}Change the address seen in the code to the address of your transparent GIF image. It will appear in the bottom right part of your banner. And it's not repeated. If you'd like to change the place the banner appears, you can change the background-position value. There are some other positions you can use for the background image. Here's a list of the basic ones:
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
Change
bottom right in my example to the preferred position from the list. You can also position the background image in a specific location. You can read more
here.
If you need more help adding a banner to your blog, please leave a
comment below.
Copyrights
The Dr. Launch cartoon character is a trademark of and a copyright of DrLaunch.
The image used in this blog post is a copyright of Freek Zijlmans and DrLaunch.
fixed, so I can share my favorite sites with my faithful readers. 
Watch blog.
