Home >>CSS Tutorial >CSS Background

CSS Background

CSS Background

The CSS Background is basically a background property in CSS that allows the user to control the background of any element, it is also known as a shorthand property.

There are five CSS background properties :

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

CSS background-color

It defines the background color of the element.

Let's take an example of css background-color:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h2,p{  
    background-color: #b0d4de;  
}  
</style>  
</head>  
<body>  
<h2>My first CSS background color page.</h2>  
<h4>Hello Phptpoint. This is an example of CSS background-color.</h4>  
</body>  
</html>   
Output :

My first CSS background color page.

Hello Phptpoint. This is an example of CSS background-color.

CSS background-image

This property is used to set an image in background. By default the entire element is covered by image.

Note: you can set the background image according to text color.

Let’s take an example of CSS background-image:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
background-image: url("../bg.jpg");  
margin-left:100px;  
}  
</style>  
</head>  
<body>  
<h1>Hello phptpoint.com</h1>  
</body>  
</html>       

CSS background-repeat

By default sometimes, the background-image property repeats the background image in a single page. Most of the images are repeated horizontally or vertically.

background-repeat: repeat-x;

Let's take an example of css background-repeat-x:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
    background-image: url("gradient_bg.png");  
    background-repeat: repeat-x;  
}  
</style>  
</head>  
<body>  
<h1>Hello phptpoint.com</h1>  
</body>  
</html>   

background-repeat: repeat-y;

Let's take another example of css background-repeat-y:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
    background-image: url("gradient_bg.png");  
    background-repeat: repeat-y;  
}  
</style>  
</head>  
<body>  
<h1>Hello phptpoint.com</h1>  
</body>  
</html>   

CSS background-attachment

This property defines whether the background image should scroll or be fixed (will not scroll with the rest of the page).

The image will not move during scrolling in the browser if you can fixed the background image.

Let’s take an example of CSS background-attachment:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
  background-attachment: fixed;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
</body>
</html>

CSS background-position

This property is used to define the position of the background image.

The background positon is set by following five ways:

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

Let's take an example of CSS background-position:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
}
</style>
</head>
<body>
<h1>Welcome to phptpoint!</h1>
</body>
</html>

Popular Tutorials