Lithium: prevent the banner from tiling

Lithium’s header is full-width. This means that its width is fluid and varies according to the browser window’s width (which is, of course, variable and unpredictable).

The only option you have to customize this part of your website is using a solid background, a pattern or a gradient because the image will be tiled to fill all the room available (this is clearly stated in Lithium’s page).

I received a few requests for a fixed width banner. I personally think this is not a good way to use this space: that band up there is one of the main graphic features of Lithium and this option may lead to unpleasant results.

Anyway, here are some workarounds if you want to play with them.

First of all, add your custom banner the usual way. Please, use a 960×120px image! As expected, it will be horizontally tiled.

If your banner is a PNG image, paste this code into the style sheet section (via Site Code Injection):

body.has-custom-banner #page-top { background-image: none; }
#title {background-image: url("banner.png");}

If your banner is of any other type (JPG, TIFF…), paste this code into the style sheet section (via Site Code Injection):

body.has-custom-banner #page-top { background-image: none; }
#title {background-image: url("banner.jpeg");}

You won’t see any difference: this code will work only on exported or published sites.

If you want to get the rid of the horizontal bar completely, add this line too:

#page-top {background-color:#FFF;}

The banner and the title start at the same position, you may need some more room for the text. You can add some padding to it:

#title h1 {padding-left:20px;}

Play with this code and see what’s better for you. Consider that there are many ways to add an identity other than banner customization (logo, sidebar…).