HTML Backgrounds

Background Color

By using the style attribute with the background-color property, you can add color to about any HTML element.

1	<p style="background-color: #f9f581;">Content goes here.</p>

Using the <div> element, you have the ability to add background color to a group of elements.

1 2 3 4

<div style="background-color: #f9f581;"> <h1 style="color: #990000; text-align: center;">This is a headline.</h1> <p>Duis vehicula convallis pulvinar. Aenean urna nisi; tincidunt eget luctus at, fringilla non libero. Vivamus commodo blandit sapien, non placerat justo venenatis nec.</p> </div>

And by using the <span> element you can selectively add color to one or more words.

1	<p>You can highlight <span style="background-color: #f9f581;">important words</span> using background-color.</p>

Background Images

Before the introduction of styles to HTML, you could only add background images to the whole Web page, a table or table data cell. Now you easily add backgrounds to almost any element.

To add a repeating, or tiled background, you use the style attribute along with the property/value background-image: url(image.gif);. URL would represent the location of the image you want to use.

1	<p style="background-image: url(image.gif);">Nulla facilisi. Curabitur at magna lectus. Aenean bibendum, urna et bibendum lobortis, lacus lorem facilisis libero, eget malesuada enim eros sed felis. Donec a enim sapien!</p>