HOWTO: Using a Background Image in the Header

[Zerkie]

If you want to use an image header on your blog, there are two ways to do it. You can create a custom component with the IMG tag source and use the Layout Manager to add it to your blog' s header. This has the advantage of being easy but the drawback is that you can't easily put any other content in your header. The second method is to use CSS to have your image header be a background image. This is the method we'll use.

Step 1: Create Your Header Image
Go ahead, we'll wait here for you.
For this article, we'll be customizing the Red Rocket blog and using this image as the header.

Step 2: Upload the Image to Your Blog
Use the File Manager in the Blogzerk Publisher's Control Panel to upload the file to your blog. Make sure to note the path you upload it to. A good idea would be to copy the link to the image from the File Manger for use in the next step.

Step 3: Customize Your CSS
Go to the Layout/Colors section in the Control Panel. If you haven't already customized your CSS (you'll just see options for choosing a new theme), then you'll need to follow these steps to customize your CSS. If you have already customized your CSS, click the Change link to edit the CSS and skip the following steps.

• Go to Layout/Templates and click on the Edit link corresponding to the style template.
• At the bottom of the list, click the Customize button. This will take you to the CSS editing area for the next section.

Now you should be in the Edit CSS screen. In the Custom CSS field, you'll need to customize and enter the following:

Code:

table.blogHeader {
   background-image: url("/layout/header1.gif");
   background-repeat: no-repeat;
   height: 91px;
}

table.columns {
   width: 850px;
   margin-right:auto;margin-left:auto;
}

• In the table.blogHeader definition, change /layout/header1.gif to be the URL to your image. This can be a relative or absolute URL.
• In the table.blogHeader definition, change the height to be the height of your image.
• In he table.columns definition, change the width to be the width of your image.

Save your changes and your image should now show up as the background image of your header and your blog's width will be the width of your header and centered in the page.

IMPORTANT: You must have at least one component in your header using the Layout Manager. Othwerwise, the header will not be displayed. We have used the Home Link component. If you don't want anything but your header image, you can create a custom component with a non-breaking space as the content and use that.

[duonexus]

Chris,

Great tip, thanks so much for the post! I have questions about getting a couple of the details right. My blog is http://ulysses.blogware.com

First, how do I get rid of the orange border around the image so that it bleeds directly into the black page background? (As in the Tropics Theme, http://blog.blogzerk.com/blog/_archives/2006/7/10/2097448.html)

Second, you will notice that in my blog, at the right of the header the image repeats. But in the CSS, background-repeat is set to none. How do I make it not repeat, but rather fill the space?

I have the following Custom CSS:

table.blogHeader {
   background-image: url("http://ulysses.blogware.com/2004/2004-02/DSCF0026-100h.jpg");
   background-repeat: none;
   height: 100px;


Thanks!
Vesna

table.columns {
   width: 950px;
   margin-right:auto;margin-left:auto;
}

[Zerkie]

Chris,

Great tip, thanks so much for the post! I have questions about getting a couple of the details right. My blog is http://ulysses.blogware.com

First, how do I get rid of the orange border around the image so that it bleeds directly into the black page background? (As in the Tropics Theme, http://blog.blogzerk.com/blog/_archives/2006/7/10/2097448.html)

Use:

Code:

table.columns td.header {
   padding: 0;
}

Then, you'll probably want to put some padding back on the left, center, and right header TD's like:

Code:

table.blogHeader td.blogHeaderLeft,
table.blogHeader td.blogHeaderCenter,
table.blogHeader td.blogHeaderRight {
   padding: 5px;
}

If you aren't repeating the image header, you'll want to keep an eye on your widths on images you put in posts since using widths more than about 300px will probably cause the layout to stretch and you'll get blank space at the right of your header.  Another option is to use a fade or gradient from the right side of your image into the background color of the header.

Second, you will notice that in my blog, at the right of the header the image repeats. But in the CSS, background-repeat is set to none. How do I make it not repeat, but rather fill the space?

I have the following Custom CSS:

table.blogHeader {
   background-image: url("http://ulysses.blogware.com/2004/2004-02/DSCF0026-100h.jpg");
   background-repeat: none;
   height: 100px;

Sorry, there was an error in the code.  It should be

Code:

background-repeat: no-repeat;

[duonexus]

Zerkie,

Thank you so much for your fast reply! Tinkering with all this is so much fun. Your reply was very helpful. Results at my blog, http://ulysses.blogware.com.

I tell people that this setup is the greatest, because everything is automatic, but everything can be configured, too. Just like my favorite kinds of camera.