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.

background image

Example 4.25 - background images - Example 4.25 (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>

In style element (<style>) 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;
  }
 

background image