Background Effects with CSS:

CSS Background Effects: Either the Web page background or the backgrounds of segments of a webpage can be specified and decorated with the use of CSS background effects. There are several ways to use CSS backgrounds:

• background-color
• background-image
• background-repeat
• background-position

Background-color:

We can use the background-color property to assign different colors to our webpage. In this example we are going to add a background color one of our paragraphs; in this example it the paragraph class is “colorpara”. Let’s begin:

.colorpara{background-color: orange;}

Or we can also use hex color values like #aa0c9bc;

Background-Image:

In this example we shall try to set an image in the background of a paragraph.

.colorpara{background-image: ‘images/NewImage.jpg’;}

The problem in above code may occur because if the image size is smaller than the paragraph, the image will repeat. In order to stop the repetition of an image, we can add an additional property to the background-image:

.colorpara{background-image: url( ‘images/NewImage.jpg’) no repeat;}

 

Background Repeat:

At times we may need to need to repeat our background images either vertically or horizontally. Therefore, we can make below addition to our code to do it what we desire:

.colorpara{background-image: url( ‘images/NewImage.jpg’) repeat -x;}

The above code will repeat the image horizontally while for vertical repetition we can use repeat-y call.

 

Background-Position

At times we are faced with the option to display our logos either on the left or to the right side of the webpage. CSS positioning comes handy at such times; we have added a background-position to our code below:

.colorpara{background-image: url( ‘images/NewImage.jpg’) repeat –x  left top;}

The above code is directed to display the image on the left top of the web document. We may also use pixels for the setting and final fixing of our images. 

—————————————————————————