Tutorial: Obama's Background in CSS - Part 2

fabiano - 04/25/2008

fabiano's blog

In this tutorial we're going to show how you may use the background we've created in the Obama's Background 1st part. But we're not only gonna show you how to put it inside a site body, but also how to create and structure the site main regions like the menu, main content, support column and footer.

Our objective is not only to assemble the whole site, but also show some CSS basic concepts and Fireworks intregration with Web.

STEP 1

The first thing we must do is to export our images. Since we're creating only the basic structure, we're only gonna need two images: background and logo.

Tutorial Obama Parte 2

STEP 2

Now let's create the html file. The structure will have 4 regions: #header, #main, #sidebar and #footer. Notice that we're gonna insert the #main and #sidebar inside a #content, this way we're gonna have a greater possibility to modify things in the future.

<body>
<div id="total">
	<div id="header"> 
		<a href="#">
			<img src="logo_obama.jpg" alt="Home Obama"/>
		</a>
	</div>
	<div id="menu">MENU
	</div>
	<div id="content">
		<div id="main">HERE IS THE MAIN CONTENT
		</div>
		<div id="sidebar">SIDEBAR
		</div>
	<div>
	<div id="footer">FOOTER
	</div>
</div>
</body>

STEP 3

Now let's create the CSS. You may use the text/CSS editor of your choice. We're using here CSSEdit, and we're going to open Live Preview. With that, we'll be able to view in real time the things we are modifying. Notice that the structure is really simple. We're inserting a body #total with "margin: 0 auto" and all the other elements inside it.

    body {
        margin: 0;
        color: #999;
        font-weight: bold;
        font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
        font-size: 2em;
        background: #01245c url(bg_obama.jpg) no-repeat center top; 
    }
	
	// AQUI ESTÁ NOSSO BG! 
	// Repare também que usamos a cor #01245C.

    #total {
        width: 960px;
        margin: 0 auto;
    }
    #header {
	   height: 160px;
   }
      #header img{
          border: 0;
      }
  #menu {
      height: 60px;
      background: #FFF;
      text-align: center;
      line-height: 60px;
  }  
  #main {
      float: left;
      width: 650px;
      background: #f0f0f0;
      height: 400px;
      text-align: center;
      padding-top: 100px;
  }
  #sidebar {
      float: right;
      width: 310px;
      background: #dadada;
      height: 400px;
      text-align: center;
      padding-top: 100px;
  }
  #footer {
      height: 150px;
      text-align: center;
      padding-top: 50px;
      clear: both;
      color: #15539c;
  }

STEP 4

Check the final result... really simple, huh? You only have to structure well the code and practice!

If you liked this post, you can BUY ME A COFFEE, thanks!

About author

I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me.

This author is brought to you by:

Hi, Thanks for your wonderful tut.

I had one doubt, how can i optimise the background image so it takes minimum time to load?

samraat (not verified) 06/20/2008

Awesome! But if the content require some scrolling in the browser window? The background image must repeat to achieve the right effect. I don´t know how to proceed about this issue.

(by the way, I´m a brazilian web designer living and working at Porto Alegre!)