How to Add a Web Page Background with CSS

A customized background can really spice up your web page. You can add a background color and/or image to a line of text, paragraph or an entire page. The background image automatically repeats for you, meaning it fills up the page or container it’s in by default. You can specify how or whether the background repeats with CSS.

Instructions:

Step 1. Open a text editor or web editor. If you have an existing CSS file, you can add your code directly into it or start from scratch.

Step 2. Insert the following code for the body element. The body element is a great place to add features, such as the margins and background settings for your entire web page:

body {
}

Step 3. Now, let’s add to this… To add a gray background to your entire page, add the color into the body element as follows, where #CCCCCC represents gray:

body {
background-color: #CCCCCC;
}

Step 4. To add a background image instead, include a link to the image you want to repeat. For example, if the background image is called myimage.jpg, code it as follows:

body {
background-image: url(myimage.jpg);
}

Step 5. To keep the background image from repeating, use no-repeat as follows:

body {
background-image: url(myimage.jpg);
background-repeat: no-repeat;
}

Step 6. Repeating the background image horizontally or vertically involves a little math. Just like the x-axis represents the horizontal axis, repeat-x repeats the background horizontally.

body {
background-image: url(myimage.jpg);
background-repeat: repeat-x;
}

Similarly, repeat-y repeats the background vertically:

body {
background-image: url(myimage.jpg);
background-repeat: repeat-y;
}

Step 7. But what if you only want to add the background to a paragraph or specific area of your web page? In this case, apply the style to a DIV, P or SPAN tag instead:

p {
background-image: url(myimage.jpg);
}

As a side note, it’s best to create a class selector for the DIV, P or SPAN tag. Otherwise, the background will be applied to all your text whenever you use that specific tag.

You can customize your class selector’s name to make it more descriptive and then call it into action from your HTML code.

.mybackground {
background-image: url(myimage.jpg);
}

Step 8. Not only can we display the background color or image separately, but we can display them together within our code as well. For example, if you want the background image to repeat horizontally and display the background color everywhere else, you could use:

body {
background-color: #CCCCCC;
background-image: url(myimage.jpg);
background-repeat: repeat-x;
}

Step 9. Save the CSS file and name it style.css or whatever-you-want.css.

Step 10. Open the HTML file where the background will be applied. To link to the CSS file from your HTML file, add the following code into an empty area of your HEAD tag as follows:

<link type=”text/css” rel=”stylesheet” href=”whatever-you-want.css” />

Step 11. The HTML file will automatically apply the body element’s style to the BODY tag. To apply the class, mybackground to paragraphs within your web page, use the following code:

<p class=”mybackground”>Add the text for your paragraph here….</p>

Be Sociable, Share!

•