Tutorial: Adding an Image Header

May 09, 2005 17:31


If you want to add an image header, go to the Customization page and hit the "Edit Customizations" button. Click on the "CSS" tab, and in the text box, add the following:

#container { padding-top: 100px; background-image: url(http://url.to.your.image); background-scroll: scroll; background-repeat: no-repeat; background-position: top center; }
You will need to change the value 100 where 100 is the height of your header image, and http://url.to.your.image which is the URL to your header image. You can also change the other CSS properties as needed.

Note that the previous code adds an image over the existing header. If you want to add a background to the existing header, use the following instead:

#header { height: 100px; background-image: url(http://url.to.your.image); background-scroll: scroll; background-repeat: no-repeat; background-position: top center; }

Lastly, if you want to remove the header text from the header, add the following:

#header h1 { display: none; }
#header h2 { display: none; }

tutorial, css

Previous post Next post
Up