A friend of mine prompted me to write this tutorial. He comes from a flash background where all you have to do is set percentages to get a full screen site, and he asked me how I did it in HTML. In this tutorial I will show you how I set up multiple backgrounds with CSS and HTML to make it appear as if my website takes up 100% of the browser. Let the wizardry BEGIN! Download the source files here
Here is what we will be building, see it live here
I created this layout so I could show how you can create a website that fills the browser window, but also will stretch in height to fit content. You could create this same effect with on huge background image, however it would take a long time to load and would not be at all scalable.
THE HTML
First we need to set up the frames for all of our backgrounds as well as the containers for our content. This is how we will be laying out our div structure.
What I will do is create a wrapper that spans the entire width of the browser for each element and then a container within it that is centered to hold the content. The markup for the container which will hold my nav and my logo will look like this.
<div id="top_wrapper"> <div id="top_content"> </div> </div>
#top_wrapper will end up spanning the entire browser and #top_content will be centered within it to hold all of our markup. To create this layout you pretty much mimic this approach over and over with one exception, middle_wrapper. The difference here is that I want this center box to scale so the lines on the edges need to be put in their own div. The full markup for the page structure will look like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS Backgrounds</title> </head> <body> <div id="top_wrapper"> <div id="top_content"> </div> </div> <!-- End top Wrapper --> <div class="break_content"> <div id="about_content"> </div> <div class="stripe"></div> <div id="middle_wrapper"> <div id="middle_content"> </div> </div> <!-- End middle Wrapper --> <div class="stripe"></div> <div class="break_content"> </div> <div id="footer_wrapper"> <div id="footer_content"> </div> </div> </body> </html>
The Images
Next we need to cut each image out of our photoshop document. The images are already cut for you in the source files, take a look at them and you can get an idea of what needs to be done to achieve this effect. For the most part we are using small pieces of each section and we will just repeat them. This will keep file size and load times down.
The CSS
Now we will write the CSS that will make it seem as if our website spans the entire browser even though we are really just using a section in the center
First lets reset everything and set up the body background. Normally I would use my reset CSS, but in the interest of time and laziness I am just going to target everything and set the margin and padding to 0. Then I want to apply a background image to the body to give the page that textured look.
*{margin:0; padding:0;}
body{background:url(images/bg_texture.gif) repeat; font-family:Arial, Helvetica, sans-serif;}
Now we will add the CSS for #top_wrapper.We want it to span the entire browser so we will give it a width of 100%, and we want to be able to see the entire bg image so we will give it a height which will be the same as the background image. Then we will take our small header image and repeat it on the x axis
#top_wrapper{width:100%; height:206px; background:url(images/top_bg.gif) repeat-x; clear:both;}
We will set up each section this way as well as the stripes for the middle wrapper. As you can see below instead of repeating x on #middle_wrapper we just used repeat, this is so that section can scale and it will always have that textured background image.
#middle_wrapper{width:100%; background:url(images/middle_bg.gif) repeat;clear:both; overflow:hidden;}
#footer_wrapper{width:100%; height:105px;background:url(images/footer_bg.gif) repeat-x;clear:both;}
.stripe{width:100%;height:15px; background:url(images/stripe.gif) repeat-x;}
At this point the effect is pretty much done, now all we need to do is add our content
Adding the Content
To complete the effect we will center the content DIVS within each wrapper and then fill them with all the markup for the page. To center the content DIVS all we have to do is apply margin:0 auto; to each one
#top_content, #middle_content, #footer_content{ width:960px; margin:0 auto;clear:both;}
The finished markup looks like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS Backgrounds</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id="top_wrapper"> <div id="top_content"> <div id="logo"><h1>Just Some Guys Portfolio</h1></div> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <!-- End top Wrapper --> <div class="break_content"> <div id="about_content"> <div class="left"> <h1>About Me</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed lorem id risus lobortis sodales. Pellentesque porta nisl nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris mattis velit nec nisi accumsan dignissim. Integer mollis nisl at dui porttitor condimentum ornare nulla accumsan. Integer convallis ultrices adipiscing. In hac habitasse platea dictumst. Proin non purus sapien, a accumsan risus. Curabitur posuere tincidunt orci non posuere. Phasellus adipiscing hendrerit sollicitudin. Ut in feugiat enim. Morbi ultrices massa est. Ut imperdiet erat et ante volutpat sollicitudin. Ut mollis nulla lectus. Sed in elit et nulla sagittis lacinia sit amet id tortor. Nullam vitae pulvinar orci. Fusce in interdum felis.</p> </div> <div class="right"> <img src="images/jimjam.jpg" width="350" alt="jim jam" class="bio_img"/></div> </div> </div> <div class="stripe"></div> <div id="middle_wrapper"> <div id="middle_content"> <h2>My Work</h2> <ul id="portfolio"> <li class="first"><img src="images/portfolio.gif" width="442" height="297" alt="port" /></li> <li class="last"><img src="images/portfolio.gif" width="442" height="297" alt="port" /></li> <li class="first"><img src="images/portfolio.gif" width="442" height="297" alt="port" /></li> <li class="last"><img src="images/portfolio.gif" width="442" height="297" alt="port" /></li> </ul> </div> </div> <!-- End middle Wrapper --> <div class="stripe"></div> <div class="break_content"> <h2>Contact</h2> <div id="contact-area"> <form method="post" action="contactengine.php"> <label for="Name">Name:</label> <input type="text" name="Name" id="Name" /> <label for="City">City:</label> <input type="text" name="City" id="City" /> <label for="Email">Email:</label> <input type="text" name="Email" id="Email" /> <label for="Message">Message:</label><br /> <textarea name="Message" rows="20" cols="20" id="Message"></textarea> <input type="submit" name="submit" value="Submit" class="submit-button" /> </form> <div style="clear: both;"></div> </div> </div> <div id="footer_wrapper"> <div id="footer_content"> <p class="copyright">© Copyright James Vec 2010</p> </div> </div> <!-- End middle Wrapper --> </body> </html>
The finished CSS will look like this.
*{margin:0;padding:0;}
body{background:url(../images/bg_texture.gif) repeat;font-family:Arial, Helvetica, sans-serif;}
label{float:left;text-align:right;margin-right:15px;width:100px;padding-top:5px;font-size:1.4em;}
li{list-style-type:none;}
#top_wrapper{width:100%;height:206px;background:url(../images/top_bg.gif) repeat-x;clear:both;}
#middle_wrapper{width:100%;background:url(../images/middle_bg.gif) repeat;clear:both;overflow:hidden;}
#footer_wrapper{width:100%;height:105px;background:url(../images/footer_bg.gif) repeat-x;clear:both;}
#top_content,#middle_content,#footer_content{width:960px;clear:both;margin:0 auto;}
#logo{width:410px;height:148px;float:left;display:inline;overflow:hidden;background:url(../images/logo.gif) no-repeat;border-right:#c7b193 1px solid;margin:10px 0;}
#logo h1{position:absolute;left:-99999px;}
#nav{width:130px;float:left;display:inline;border-left:#faecd9 1px solid;margin:10px 0;padding:0 0 0 15px;}
#nav li a{color:#231f20;font-size:1.95em;text-decoration:none;font-weight:700;}
#middle_content h2{color:#fff;display:block;padding:20px 0 0;}
#portfolio li{width:442px;float:left;display:inline;margin:20px 20px 10px;}
#contact-area{width:600px;margin-top:25px;}
#contact-area input,#contact-area textarea{width:471px;font-family:Helvetica, sans-serif;font-size:1.4em;border:2px solid #ccc;margin:0 0 10px;padding:5px;}
#contact-area textarea{height:90px;}
#contact-area textarea:focus,#contact-area input:focus{border:2px solid #900;}
#contact-area input.submit-button{width:100px;float:right;}
#about_content,#portfolio{width:960px;float:left;display:inline;}
.first{margin-left:0 !important;padding-left:0 !important;}
.last{margin-right:0 !important;padding-right:0 !important;}
.bio_img{margin:0 0 0 30px;}
.stripe{width:100%;height:15px;background:url(../images/stripe.gif) repeat-x;}
.break_content{width:960px;clear:both;overflow:hidden;margin:0 auto;padding:30px 0;}
.left{width:470px;float:left;display:inline;}
.right{width:470px;float:right;display:inline;}
.copyright{text-align:center;color:#FFF;padding:30px 0;}
I grabbed the form markup and CSS from Chris Coyier over at css-tricks. I did this just in the interest of time, who wants to style a form for a demo anyway. I don’t even want to style a form for a paying client
I hoped this helped you understand the concept of elastic background images and if you have any questions feel free to contact my by email above or just leave a comment below. A special shout out to Lawrence, buddy this one was for you!
John
August 23, 2010 at 4:10 am
cheers mate. good read
[Reply]
James Vec Reply:
August 24th, 2010 at 12:52 am
well thank you man, I appreciate the comment
[Reply]
wolfpir@te
September 25, 2010 at 3:37 am
Great tutorial. Look forward to the next one. *
[Reply]
James Vec Reply:
September 25th, 2010 at 7:18 pm
Thanks buddy *******
[Reply]
srikanth Reply:
May 1st, 2011 at 7:32 am
Your website designs are really very good
[Reply]
Jamesvec Reply:
May 1st, 2011 at 9:44 am
Thanks Srikanth!
Alfreda
November 17, 2011 at 6:06 pm
The next time I read a blog, I hope that it doesnt disappoint me as much as this one. I mean, I know it was my choice to learn, but I truly thought youd have something fascinating to say. All I hear is a bunch of whining about one thing that you possibly can fix when you werent too busy looking for attention.
[Reply]
image stock
February 2, 2012 at 9:30 pm
I am curious to find out what blog platform you happen to be using? I’m experiencing some small security problems with my latest site and I would like to find something more safe. Do you have any recommendations?
[Reply]