Tag Archives: images

Scaleable Header Image

This is a demo page that shows how to create a scaleable background image for the header. Although the background property of either banner-bg or banner can be set, the results often do not allow the entire image to be displayed proportionally.

In header.php, add an image element after the opening DIV for banner-bg and before the opening DIV for banner like this:
<div id="banner-bg" class="cf">
  <img id="header-image" src="/images/header.jpg" />
  <div id="banner" class="row">
      <div id="logo-area" class="col5">

Point the src attribute to the image you want to use as the header. Notice that the img element has an ID of header-image for CSS styling.