CSS | Background - GeeksforGeeks

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(..//images/pexels-photo-370799.jpeg);

}

</style>

<body>

<h1>

Geeksforgeeks

</h1>

</body>
```
OUTPUT:
```
Background repeat : By default the background image property repeats the image both horizontally and vertically.
To rotate an image horizontally:
Syntax:
```
body
{
   background-image:link;
   background-repeat: repeat:x;
}
```
Example :
<style>

h1{

background-image:url("paper.gif");

background-repeat: repeat-x;

}

</style>

<body>

<h1>

"Hello world"

</h1>

</body>
```
OUTPUT:
```
To rotate an image vertically:

Syntax :
```
body
{
   background-image:link;
   background-repeat: repeat:y;
}
```
Example:
<style>

body{

background-image:url("paper.gif");

background-repeat: repeat-y;

}

</style>

<body>

<h1>

Geeksforgeeks

</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>

h1{

background-image:url("paper.gif");

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-positon:left top;
}
```
Example:
<style>

h1{

background-image:url("paper.gif");

background-repeat:no repeat;

background-position:left top;

}

</style>

<body>

<h1>

Geeksforgeeks

</h1>

</body>
```
OUTPUT:
```

My Personal Notes

Suggest a Topic

Recommended Posts: