CSS | Background

Difficulty Level : Medium
Last Updated : 08 Jul, 2019

The CSS background properties are used to define the background effects for elements.

Css background properties are as follows :

Background-color
Background-image
Background-repeat
Background-attachment
Background-position

Background color : This property specifies the background color of an element.
Syntax :
```
body
{
   background-color:color name
}
```
A color name can also be given as : “green”, a HEX value as “#5570f0”, an RGB value as “rgb(25, 255, 2)”.
Example :

<style>

h1{

background-color: blue;

}

</style>

<body>

<h1>Geeksforgeeks</h1>

</body>
OUTPUT:

Background Image : This property specify an image to use as the background of an element. By default, the image is repeated so it covers the entire element.
Syntax:

body
{
   background-image : link;
}

Example:

<style> 
body{ 
background-image:url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png"); 
} 
</style> 
<body> 
<h1>Geeksforgeeks</h1> 
</body>                     

OUTPUT:

Background repeat : By default the background image property repeats the image both horizontally and vertically.
To repeat an image horizontally:
Syntax:

body
{
   background-image:link;
   background-repeat: repeat:x;
}

Example:

<style> 
    body { 
        background-image: url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png"); 
        background-repeat: repeat-x; 
    } 
</style> 
  
<body> 
    <h1>"Hello world"</h1> 
</body> 

OUTPUT:

To repeat an image vertically:

Syntax:

body
{
   background-image:link;
   background-repeat: repeat:y;
}

Example:

<style> 
body { 
    background-image: url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png"); 
    background-repeat: repeat-y; 
} 
</style> 
  
<body> 
    <h1>"Hello world"</h1> 
</body>                     

OUTPUT:

Background-attachment : This property is used to fix the background ground image.The image will not scroll with the page.
Syntax:

body
{
   background-attachment: fixed;
}

Example:

<style> 
body{ 
background-image: url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png"); 
background-attachment:fixed; 
} 
</style> 
<body> 
<h1>Geeksforgeeks</h1> 
</body>                     

OUTPUT:

Background-position : This property is used to set the image to a particular position.
Syntax :

body
{
   background-repeat:no repeat;
   background-position:left top;
}

Example:

<style> 
body{ 
background-image: url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png"); 
background-repeat:no-repeat; 
background-position:center; 
} 
</style> 
<body> 
<h1>Geeksforgeeks</h1> 
</body>                     

OUTPUT:

My Personal Notes

Related Articles