Tutorial - 4

Step 8 : Open your style.css file and add CSS rules. We should build our website in a standard way, using HTML5 and CSS3. We can code for our header section first.

Step 9 : In the header_top and header_bottom style, I have assigned different background image to be repeated in the "x" direction. And also the company logo is placed in the header with the height of 218px.

Note: I have used 3 different header images for desktop, tablet and iphone with different sizes.

#header_top{
  width: 100%;
  background-image:url(images/top_blue_bg.jpg);
  background-repeat:repeat-x;
  height:12px;
  }
  #header{
  width: 100%;
  background-color:#00AEC3;
  background-image:url(images/header_image.jpg);
  background-repeat:no-repeat;
  height:218px;
  margin-left:0 0 0 0;
  }
  #header_bottom{
  width: 100%;
  background-image:url(images/bottom_blue_bg.jpg);
  background-repeat:repeat-x;
  height:15px;
}

GOTO               Previous         Next