CSS Backgrounds

CSS Backgrounds

CSS background property is used to define the background effects on element. There are 5 CSS background properties that affect the HTML elements:

1. background-color

2. background-image

3. background-repeat

4. background-attachment

5. background-position

1) CSS background-color

The background-color property is used to specify the background color of the element.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
h1 {
    background-color: green;
}
p {
    background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<p>This paragraph has its own background color.</p>
</body>
</html>
Try it with the Editor

2) CSS background-image

The background-image property is used to set an image as a background of an element. By default the image covers the entire element.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("wild_life.png");
}
</style>
</head>
<body>
<h1>CSS background-image example!</h1>
</body>
</html>
Try it with the Editor

Note: The background image should be chosen according to text color. The bad combination of text and background image may be a cause of poor designed and not readable webpage.

3) CSS background-repeat

By default, the background-image property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
body {  
   background-image: url("background-image-repeat-x.png");  
   background-repeat: repeat-x;  
}  
</style>
</head>
<body>
<h1>Example of background-image with repeat-x property.</h1>
</body>
</html>
Try it with the Editor

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
body {  
   background-image: url("background-image-repeat-y.png");  
   background-repeat: repeat-y;  
}  
</style>
</head>
<body>
<h1>Example of background-image with repeat-y property.</h1>
</body>
</html>
Try it with the Editor

4) CSS background-attachment

The background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in browser window. If you set fixed the background image then the image will not move during scrolling in the browser.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("img_tree.png");
    background-attachment: fixed;
    background-repeat: no-repeat;
    }
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Try it with the Editor

5) CSS background-position

The background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage.

You can set the following positions:

  1. center
  2. top
  3. bottom
  4. left
  5. right

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("img.png");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
}
</style>
</head>
<body>
</body>
</html>
Try it with the Editor