[tutorial] adding a header.

Theme: Organizer
Style system: 2
Base: Flexible squares
Design: No sidebar


This tutorial will show you how to insert a header. Some prior CSS knowledge could come in handy but it is not necessary:
I. inserting the header image
II. making the image visible
III. repositioning the header image

------

I. inserting the header image
Imagine you want to use this header:


Open up your CSS file in a text editor and find this passage:

div.headerimage {
}

Here's where you insert your header image, using this code:

background-image: url(http://IMAGE.jpg);

Your full code now becomes:

div.headerimage {
background-image: url(http://IMAGE.jpg);
}

The header image does not show up yet, which is why we continue on...

II. Making the image visible
To make the image show up, we need to increase the width and height of the div layer that contains it. The image is in this case 504 by 304 px, so we make the width and height accordingly:

width: 504px;
height: 304px;

The full code becomes:

div.headerimage {
background-image: url(http://IMAGE.jpg);
width: 504px;
height: 304px;
}

The layout now looks like this:


III. Repositioning the header image
Now, this layout is centered and I like that, so I use the following code to center the header image as well:

margin: 0 auto;

The full code becomes:
div.headerimage {
background-image: url(http://IMAGE.jpg);
width: 504px;
height: 304px;
margin: 0 auto;
}

The layout now looks like this:


------

Screenshots may look slightly different for IE, but the codes work for all browsers. Got questions?