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 - specify height - Example 4.25 (Without Styles)

 <h1 id="usc">United States Constitution </h1>
 <p>We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
 </p>

In style element (<style>) within head element: 

#usc {
  height: 80px;
  background-color: #dddddd;
  background-image: url('images/flag-small.png');
  /* Note: flat-small.png is 150 x 79 px */
  background-repeat: no-repeat;
  background-position: left center;
  margin-bottom: 0.5em;
}
#usc  {
  padding-top: 0.5em;
  text-align: center;
  font-family: tahoma,arial,helvetica,sans-serif;
}
 

background image

Example 4.26 - background images - give padding - Example 4.26 (Without Styles)
 
 <h1 id="usc">United States Constitution </h1>
 <p>We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
 </p>

In style element (<style>) within head element: 

#usc {
  height: 80px;
  background-color: #dddddd;
  background-image: url('images/flag-small.png'); /* 150 x 79 px */
  background-repeat: no-repeat;
  background-position: left center;
  margin-bottom: 0.5em;
}
#usc  {
  padding-top: 0.5em;
  padding-left: 160px;
  font-family: tahoma,arial,helvetica,sans-serif;
}
 

background image