HTML Background

When browsing online you may often come across websites with colorful background, represented by an animated, graphic, plain-color wallpaper, or even a whole image. Setting a background style for websites is done with the help of the background attribute typical of HTML elements.

Content:

The background attribute in HTML elements
Setting background through CSS

The background attribute in HTML elements

Using the background attribute in the HTML code of your pages, you can reach really attractive color effects for your web presence. You can use that attribute in two basic ways - through the Cascading Style Sheets (CSS) or by setting background properties in the HTML elements directly. While the CSS method is widely used and preferred by a growing number of designers, setting backgrounds for your web pages through HTML is considered an obsolete technique with many inflexibilities.

Setting background through CSS

Applying a background style to your pages through CSS is amazingly flexible. You can define a background attribute to any HTML element - from a table cell to a whole page on your site. The attribute has many variations according to exactly what background property you want to define:

Background-color property:

With this property you can set a background color for any element of the page. For instance, you can color the background of a paragraph, or a table or set one-color padding for a whole page, if necessary.

Example of using the background-color property for one paragraph marked with <div>:

<div style="background-color:violet;width:300px;">
This is just an exemplary paragraph showing you how a text paragraph
on your page will look like with a background color set.
</div>

Here is how the colored paragraph will look like online:

This is just an exemplary paragraph showing you how a text paragraph on your page will look like with a background color set.

Example of using the background-color property for the header of a table:

<table border="1">
<tr style="background-color: violet">
<th>Country</th>
<th>Flag</th>
</tr> <tr>
<td>Greece</td>
<td>Greek Flag</td>
</tr>
</table>

Here is how the colored table header will look like online:

Country	Flag
Greece	Greek Flag

Example of using the background-color property for the whole page (marked with <body>):

<html>
<head>
</head>
<body style="background-color:yellow;">
This page is set on a yellow background.
</body>
</html>

Here is how the colored page will look like online:

Background-image property:

Using this property you can set an image as a background for either a separate element on your site or for the whole site.

Example of using the background-image property for one paragraph (marked with <div>):

<div style="background-image: url(/images/scripting.jpg);
background-repeat:no-repeat;
width:300px;
height:300px">
This is just an exemplary paragraph showing you how a paragraph
on your page will look like with a background image set.
</div>

Here is how the background-image paragraph will look like online:

Example of using the background-image property for the whole page (marked with <body>):

Here is how the image background set page will look like online:

Background-position property:

Using this background property you can set a background image in a certain position. The image position can be set in percents or in pixels. The most common measurement unit used is %, as displayed in the example below. By setting the position of a background image to 50%-50% you will place the image at the center of the paragraph.

Example of using the background-position property (in %) for a background image:

<div style="background-image: url(/images/scripting.jpg);
background-repeat:no-repeat;
background-position: 50% 50%;
border:1px solid #F00;
width:300px;
height:300px">
This is just an exemplary paragraph showing you how a paragraph
on your page will look like with a background image positioned at the center!
</div>

Here is how the background-image page will look like online in a central position:

Background-repeat property

This property is used to specify if a background image set for a certain element of a page or for the whole page has to be repeated, i.e. displayed in tiles, or not, and how this should be done. Its possible values include: repeat (the background image repeats both horizontally and vertically), repeat-x (the image repeats horizontally only), repeat-y (the background repeats vertically only), no-repeat (the background is not repeated).

Example of using the background-repeat property for one paragraph (marked with <div>):

<div style="background-image: url(/images/scripting.jpg);
background-repeat:repeat;
width:300px;
height:300px">
This is just an exemplary paragraph showing you how a paragraph
on your page will look like with a repreated background image set.
</div>

Background property

If you want to apply various background properties for one and the same element, you can use the general background property to specify all of them in a short and easy way. Using most of the properties from the paragraph examples above (background color, image, centered position, image repeated), the background property will take the following form:

Example of using the shorthand background property:

body
{
background: violet url(/images/scripting.jpg) no-repeat 50% 50%
}

Here is how this example will look like in your browser: