This tutorial deals with major aspects of background effects and CSS. We will cover

1)Colors

2)Images

3)Watermarking

Background Colors

 

You can modify the background color of the whole document or any block-level element. The color can also be made to adjust with the background setting of the parent.

 

Consider the code below and the output for clear understanding of the syntax and usage.

 

<p style=”background-color : Red”>

This paragraph has a red background

</p>

 

 

 

Background Images

 

You can also put an image as the background behind any element, and these images would be visible like a watermark also. Consider the code and output below

 

<p style=”background-image : url(backgr.jpg);”>

This paragraph has a background image

</p>

 

 

Placement of Background Images

 

We can easily decide the position of the images in the background of a particular element. This placing can be done using the background position tag which defines the x and y coordinates of the image in background. Consider the code below.

 

<p style=”background-position : 250px 0px;background-image : url(backgr.jpg);”>

This paragraph has a background image

</p>

 

 

Creating a Watermark

 

Its very easy to create a Watermark in an page. There are 3 steps or attributes of CSS which are involved in it.

1)background image

2)background repeat

3)background attachment

 

The background image is used to select an image to be displayed in your page, the background repeat displays it only once and the attachment is used to turn it into a bookmark.

The following code can be used to create a watermark image as shown

 

<style>

<!–

body{

background-position : 100px 100px;

background-image : url(backgr.jpg);

background-repeat : no-repeat;

background-attachment : fixed;

}

//–>

</style>