Fixed and overlaid banner at bottom of HTML page

I was intrigued by the banner at the bottom of the webpage of the WMPoweruser web site: So I experimented with Dreamweaver and played with some CSS. After some trials, I found a solution that is simple to implement:

#banner {
height: 100px;
width: 640px;
position: fixed;
bottom: 0px;
background-image: url(bannerImage.png);

With the above CSS, the banner always stays at bottom of the page, whether the page is resized or scrolled. Note that I used png as the background image because I like to have a bit of transparency effect to see behind the banner.

Try this out. It is easy. Tested with both IE 8 and Google Chrome.


~ by brianchau on April 25, 2010.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: