How to Use DIV in an HTML Background
Web designers use Cascading Style Sheet (CSS) rules to style the appearance of HTML web sites because they provide numerous style options. One of these rules, referred to as the background property, enables the designer to style the background of individual elements of HTML code known as Divs. The background property establishes a background color or applies an image as the background. A master Div can be positioned in a way that establishes a background for the entire site.
Other People Are Reading
Instructions
-
Using a Color as the Div Background
-
1
Write a CSS rule for your Div and establish a background property. The following example uses the background-color property to style a new Div. The new Div is given a class of myDiv. The background-color property is assigned a value of red. This CSS rule will implement a red background on all Divs with a class of .myDiv with a red background.
.myDiv {
background-color: red;
}
-
2
Apply the class to your HTML Div. In the following example, the HTML Div is assigned with the myDiv class. This means that the text that appears after the <div> tag but before the </div> tag will have a red background.
<div class="myDiv">This is the text that will appear over the red background.</div>
-
-
3
Assign additional styles as necessary. You may write additional properties to your new CSS rule. Since black text on a red background isn't very readable the next example amends the myDiv CSS rule. It adds the color property and assigns the color property with a value of white. The color property determines the color of the text. The text will now have a white color, which will show up better against the red background.
.myDiv {
background-color: red;
color: white;
}
Using an Image File for the Background
-
4
Write a new CSS rule and assign an image background with the background-image property. The background-image property tells the browser to load an image file as the background. This sample uses the myBackground.gif image as the background for all Divs with the class of myDiv.
.myDiv {
background-image:URL(myBackground.gif);
}
-
5
Apply the class to the HTML Div.
<div class="myDiv">This is the text that will appear over the myBackground.gif image.</div>
-
6
Utilize the background-position property to fine-tune the appearance of the image. The background-position property establishes the initial position of the background image. Some of the possible values for the property include left, right and center. In this example, the background-position property is set at the center value. This means the image will be positioned in the center of the Div.
.myDiv {
background-image:URL(myBackground.gif);
background-position:center;
}
-
7
Apply the background-repeat property. This property determines if the image will repeat once the Div expands beyond the size of the image. Possible values include repeat, repeat-x, repeat-y and no-repeat. The "repeat-x value" dictates that the image is repeated horizontally. The "repeat-y value" force the image to repeat vertically. In the example, the background-position property is set to no-repeat. The net impact of this rule is that the Div will have an image that uses the myBackground.gif graphic, does not repeat and is centered in the middle of the Div.
.myDiv {
background-image:URL(myBackground.gif);
background-position:center;
background-repeat:no-repeat;
}
Use a Div to Provide Background for Entire HTML Site
-
8
Create a new CSS rule that defines a Master Div. This Div copies the properties and values used in previous example to a new Div that has been assigned the identity of myMasterdiv.
#myMasterDiv {
background-image:URL(myBackground.gif);
background-position:center;
background-repeat:no-repeat;
}
-
9
Set the Div using the position property, which tells the web browser where to place the Div. Companion properties are used to set the width, height and positioning behavior of the Div. In the following case, four of these rules are applied: the width and height will expand to fill 100 percent of the screen; the Div is positioned relative to the other Divs; and a clearance is placed on both sides of the Div so that other Divs will not interfere with the master Div.
#myMasterDiv {
background-image:URL(myBackground.gif);
background-position:center;
background-repeat:no-repeat;
position:relative;
clear:both;
width:100%;
height:100%; }
-
10
Assign the master Div to the appropriate HTML document.
<div id="myMasterDiv"> All of the body of the HTML content goes here. It will appear on top of the myBackground.gif file</div>
-
1
References
- Photo Credit Comstock/Comstock/Getty Images
