Conquer CSS Episode[4]:- CSS Backgrounds

You are currently viewing Conquer CSS Episode[4]:- CSS Backgrounds

CSS – Backgrounds

This chapter teaches you how to set the backgrounds of various HTML elements. You can set the following background properties of an element −

  • The background-color property is used to set the background color of an element.
  • The background-image property is used to set the background image of an element.
  • The background-repeat property is used to control the repetition of an image in the background.
  • The background-position property is used to control the position of an image in the background.
  • The background-attachment property is used to control the scrolling of an image in the background.
  • The background property is used as a shorthand to specify a number of other background properties.

Set the Background Color

Following is the example which demonstrates how to set the background color for an element.

<html>
   <head>
   </head>
   <body>
  	<p style = "background-color:yellow;">
     	This text has a yellow background color.
  	</p>
   </body>
</html>

Set the Background Image

We can set the background image by calling locally stored images as shown below −

<html>
   <head>
  	<style>
     	body  {
        	background-image: url("/css/images/css.jpg");
        	background-color: #cccccc;
     	}
  	</style>
   </head>
   <body>
  	<h1>Hello World!</h1>
   </body>
<html>

Repeat the Background Image

The following example demonstrates how to repeat the background image if an image is small. You can use the no-repeat value for the background-repeat property if you don’t want to repeat an image, in this case, the image will display only once.

By default, the background-repeat property will have a repeat value.

<html>
   <head>
  	<style>
     	body {
        	background-image: url("/css/images/css.jpg");
        	background-repeat: repeat;
     	}
  	</style>
   </head>
   <body>
  	<h1>The background-repeat Property</h1>
   </body>
</html>

It will produce the following result −

BackGroundRepeatProperty

The following example demonstrates how to repeat the background image vertically.

<html>
   <head>
  	<style>
     	body {
        	background-image: url("/css/images/css.jpg");
        	background-repeat: repeat-y;
     	}
  	</style>
   </head>
 
   <body>
  	<p>Terminal Stack</p>
   </body>
</html>

The following example demonstrates how to repeat the background image horizontally.

<html>
   <head>
  	<style>
     	body {
        	background-image: url("/css/images/css.jpg");
        	background-repeat: repeat-x;
     	}
  	</style>
   </head>

   <body>
  	<p>Terminal Stack</p>
   </body>
</html>

Set the Background Image Position

The following example demonstrates how to set the background image position 100 pixels away from the left side.

<html>
   <head>
  	<style>
 	    body {
        	background-image: url("/css/images/css.jpg");
        	background-position:100px;
     	}
  	</style>
   </head>
 
   <body>
  	<p>Terminal Stack/p>
   </body>
</html>

Shorthand Property

You can use the background property to set all the background properties at once. For example −

<p style = “background:url(/images/pattern1.gif) repeat fixed;”>

   This paragraph has fixed repeated background images.

</p>

Leave a Reply