CSS | Background
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
>
chevron_rightfilter_noneOUTPUT:
- 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
>
chevron_rightfilter_noneOUTPUT:
- 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
>
chevron_rightfilter_noneOUTPUT:
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
>
chevron_rightfilter_noneOUTPUT:
- 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
>
chevron_rightfilter_noneOUTPUT:
- 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
>
chevron_rightfilter_noneOUTPUT:
Recommended Posts:
- CSS | background-attachment Property
- CSS | background-clip Property
- CSS | background-repeat Property
- CSS | background-color Property
- How to set multiple background images using CSS?
- Set the size of background image using CSS ?
- CSS | background-image Property
- CSS | background-size Property
- CSS | background-position Property
- CSS | background-origin property
- CSS | background-blend-mode Property
- Set the opacity only to background color not on the text in CSS
- How to give text or an image transparent background using CSS?
- HTML5 Game Development | Infinitely Scrolling Background
- HTML | Change Background color using onmouseover property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.