Floating Background Branding
Your logo is one of the most important tools for branding your website, and in general people look for a logo in the top left corner of a website. So why not keep it there no matter how long your page happens to be?
It used to be easy to keep your logo on the top of the page, no matter how far down the user scrolled, but with the demise of the frame page and the rise of SEO web developers have to be a little more savvy.
With a fixed background image you could place your logo in the top right hand corner of every page and it will never go away, but having it sit there can get a little boring if not distracting. But did you know you can have your background image change as the page moves? If not, let me show you how.
First we need a web page:
<html>
<head><title>Floating Background Branding</title></head>
<body>
<div id="wrapper">
<div id="header">
<div id="headwidth">
<p><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Contact</a></p>
</div>
</div
<div id="navwrapper">
<div id="nav">
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul>
</div>
</div>
<div id="contentwrapper">
<div id="content">
<h1>Headline</h1>
<p>Put Content Here, make sure you have enough to scroll</p>
</div>
</div>
<div id="footer">
<p>Floating Background Branding | JohnNemec.com © 2009</p>
</div>
</div>
Now lets give it some style:
#wrapper{
width:800px;
margin:0 auto;
border:3px solid #333333;
}
#header{
background:#336799 url(logo.jpg) no-repeat fixed 230px 50px;
border-bottom:4px solid #777777;
height:150px;
}
#headwidth{
margin:auto;
width:800px;
}
#headwidth p{
float:right;
margin:20px;
}
a{
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
a:hover{
color:#FFCC00;
text-decoration:underline;
}
#navwrapper{
background:#000000 url(logo2.jpg) no-repeat fixed 230px 50px;
height:40px;
border-bottom:3px solid #999999;
}
#nav {
margin:auto;
width:800;
}
#nav ul{
list-style-image:none;
list-style-position:outside;
list-style-type:none;
float:right;
margin:7px 0;
padding:0;
}
#nav ul li{
margin:0;
padding:0 20px;
display:inline;
}
#contentwrapper{
background:#FFFFFF url(logo3.jpg) no-repeat fixed 230px 50px;
}
#content{
padding:5px 40px;
}
#footer{
border-top:3px solid #333333;
text-align:center;
}
I know its not the most exciting design, but it does show how you can keep your logo right there on the top so everyone can see it at all times. You might even want to get more creative than me and do something interesting. I’d love to see what you come up with, post your links below.
Surprise Surprise – This does not seem to work in IE6, so I’ve also included an IE6fix.css workaround for anyone interested in worrying about IE6, just take a look at the source code.
Popularity: 1% [?]
Trackbacks & Pingbacks