Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Spring 2019

## Backgrounds

Instead of having an `img` element within the HTML, we can include design images in the CSS. This example displays the flag.png with the h1 of the markup.

Example 4.26 - background images - Example 4.26 (Without Styles) |
<h1 id="ustitle">United States Constitution</h1><div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan ipsum et libero. Donec tincidunt. Duis non nulla a tortor sagittis bibendum. Nunc ante. Vestibulum vulputate. Aliquam ultricies, est vitae mattis ornare, leo pede lacinia mi, vitae pharetra turpis enim sed turpis. Mauris lorem. Ut rhoncus. Fusce congue ultricies est. Nulla dignissim sagittis ipsum. Vivamus eu lectus non enim dignissim imperdiet. Nulla facilisi. Integer euismod cursus erat. </div>#ustitle { height: 80px; background: #ddd url('http://cscie12.dce.harvard.edu/resources/images/flag-small.png') left center no-repeat; margin-bottom: 0.5em; } #ustitle { padding-top: 0.5em; text-align: center; font-family: tahoma,arial,helvetica,sans-serif; }

- Markup
- Style
- Screenshot

    <h1 id="ustitle">United States Constitution</h1><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan ipsum et libero. Donec tincidunt. Duis non nulla a tortor sagittis bibendum. Nunc ante. Vestibulum vulputate. Aliquam ultricies, est vitae mattis ornare, leo pede lacinia mi, vitae pharetra turpis enim sed turpis. Mauris lorem. Ut rhoncus. Fusce congue ultricies est. Nulla dignissim sagittis ipsum. Vivamus eu lectus non enim dignissim imperdiet. Nulla facilisi. Integer euismod cursus erat.</div>

In `style` element (`<style type="text/css">`) within `head` element:

    #ustitle {
      height: 80px;
      background: #ddd url('images/flag-small.png') left center no-repeat;
      margin-bottom: 0.5em;
    }
    #ustitle  {
      padding-top: 0.5em;
      text-align: center;
      font-family: tahoma,arial,helvetica,sans-serif;
      }

Copyright © David Heitmeyer