CancelImage Upload

HTML For beginners: How to define a website background Color or Image Property

There are two ways of defining the background color of a website's body, and other HTML elements. The first is the standard HTML method employed by most beginners. The second method is the more professional way of setting the background property in HTML, by using Cascading Style Sheets (CSS).

We will first have a look at the traditional beginner's method of setting the background via HTML without using CSS. Here we can either include a background image via the attribute background, or define the background color with the attribute bgcolor.

An example of the attribute background:

<html>
<head>

<!-- Header Tags -->

</head>
<body background="images/bg.jpg">

<!-- Your content here -->

</body>
</html>

And here how to set the bgcolor:

<html>
<head>

<!-- Header Tags -->

</head>
<body bgcolor="#777">

<!-- Your content here -->

</body>
</html>

While the above two methods work perfectly well, defining the background properties of an HTML element via CSS is a far more professional practice. Setting a background image via CSS also gives the developer a lot more control. First however we shall have a look at how a background color can be defined in CSS.

The definition itself is rather simple. Between two style tags placed within the HTML head the body settings can be accessed as follows:

<html>
<head>

<style>

body {
background:#555;
}

</style>

</head>
<body>

<!-- Your content here -->

</body>
</html>

For a more detailed look into accessing individual HTML elements via CSS I suggest you read the introduction to CSS tutorial. We shall however now move on to defining background images via CSS. Here is an example of how a background image can be included:

<html>
<head>

<style>

body {
background-color:#555;
background-image:url('path/image.jpg');
background-repeat: no-repeat;
background-attachment:fixed;
background-position:center;
}

</style>

</head>
<body>

<!-- Your content here -->

</body>
</html>

As you can see there are multiple properties that can be set including such as whether or not the image is to be repeated and the position. For a more detailed insight into how these various properties can be set, try the following tutorial.

Login
Want to leave a comment?

No problem. Just enter your email and password below.


register | home | reminder

myDesignTool Networking • www.mydesigntool.cominfo@mydesigntool.com