CSS background styling



The background color of an element is defined as follows 

background-color:#xxxxxx;

Where #xxxxxx is the 6 hexadecimal codes that define the color.

In place of the code, you can also define the color using the name of the color, as, in the example below the color is set to yellow 


background-color:yellow;

Here is an example program that sets the background color of the whole body to yellow color. 


<html>
<head>
<style type="text/css">
body
{
background-color:yellow;
}
</style>
</head>

<body>

<b>Experimenting with background coloe</b>
<p>The background color should be yellow</p>

</body>
</html>

Here is some self explanatory notes about the background color.


You may like to try this code using online tool here

Styling Backgroung with Image

Instead of a fixed color, you may also have an image as the background color. The code for styling, using a background image is as follows. 
 
{
background-image:url('xxx.jpg');
}

The xxx.jpg is the name of the file which acts as the background image. Here is the complete code for the background image of body section of a code. 

<html>
<head>

<style type="text/css">
body {
background-image:url('http://referencedesigner.com/tutorials/css/images/background.jpg');
}
</style>

</head>

<body>
<h1> Background Color </h1>

Experimenting with background image color. 

</body>
</html>


Notice that the whole image is repeated throughout the background of the body in the above example ( horizontally as well as vertically). The actual image is only as much as is shown below.


You may like to try this code using online tool here
If the image is homogenous, it makes sense to keep the images size, smallest possible. This reduces the time it takes for the image to travel from the server to the client machine.

Repearing the Image only horizontally or vertically



In many cases, it may be desirable to repeat the image only horizontally or vertically. Here is how you can repeat the background image only horizontally or vertically. 
background-repeat :repeat-x; // Repeat horizontally
background-repeat :repeat-y; // Repeat vertically



<html>
<head>

<style type="text/css">
body {
background-image:url('http://referencedesigner.com/tutorials/css/images/background.jpg');
background-repeat :repeat-x;
}
</style>

</head>

<body>
<h1> Background Color </h1>

Experimenting with background image color. 

</body>
</html>


You may like to try this code using online tool here
As an exercise, try changing the horizontal repeat to vertical repeat and see its effect.

Additionally, if you do not want any horizontal or vertical repetition, you can do it using. 

background-repeat:no-repeat;

The last property for the background image is the background-position, which can be top, center, bottom, left, right. It can also be any sensible combination. 
background-position:top;
background-position:center;
background-position:bottom;
background-position:right;


Notice that the background-position makes meaningful only if you use no-repeat for the background-repeat property.

Here is the example that shows the usage of the backgroud image positioning 
<html>
<head>

<style type="text/css">
body {
background-image:url('http://referencedesigner.com/tutorials/css/images/background.jpg');
background-repeat :no-repeat;
background-position :top right;
}
</style>

</head>

<body>
<h1> Background Color </h1>

Experimenting with background image, no-repeat and position.  

</body>
</html>


Try experimenting will all of these variations and see its effect - here. Before we end, we promise, this is going to be one last property. This has to do with how the background image behaves when you scroll the page - do they move as well or they stay fixed ?

This is the background-attachment propery which can have fixed or scroll values ( actually inherit property as well, but we will leave it for now).

Here is an example that you my like to experiment to see how the background attachment works - click - here
In the next page we will learn about the text styling.