How to Use DIVs for Background

The DIV tag is used to create blocks that can be styled using various CSS (cascading style sheet) attributes. Even though the advent of HTML5 will eventually render the DIV tag obsolete, it is currently still a useful tag. Using the DIV tag with inline attributes can provide a quick way to customize a specific section of a page. The DIV tag can be used as a wrapper to create a background for a specified portion of the page. The background can be set to either a solid color or an image.

Instructions

Set Background to a Color

1. Find the HTML color code for the background. One resource to get the color code is the HTML Color Picker website (see Resources).

2. Add the "background-color" attribute as a style option to the DIV tag. Define the attribute with the HTML color code. For black, the code is as follows:

   <DIV style="background-color:#000000"> your text here </div>

3. Upload your Web page and then test the code by viewing the page in multiple browsers.

Set Background to an Image

1. Upload the background image to your Web server or to a service that allows for direct linking to images.

2. Add the "background-image" attribute as a style option to the DIV tag. Define the attribute with the following code: "URL(pathtoimage)". Replace the text inside the parenthesis to match the path of the image you want to use. For an image named "background.jpg" that is stored in a folder named "images" in the same directory as the Web page, the code is as follows:

   <DIV style="background-image: URL(/images/background.jpg)"> your text here </div>

3. Upload your Web page and then test the code by viewing the page in multiple browsers.

References

• HTML Color Picker
• W3C: CSS Backgrounds and Borders
• Courses Web: DIV and SPAN
• HTML5 Doctor: You Can Still Use Div