CSS Background - GeeksforGeeks

07 Oct, 2021
The CSS background properties are used to define the background effects for elements. There are lots of properties to design the background. CSS background properties are as follows: 
CSS Background-color Property: The background-color property in CSS is used to specify the background color of an element.
CSS Background-image Property: The background-image property is used to set one or more background images to an element.
CSS Background-repeat Property: The background-repeat property in CSS is used to repeat the background image both horizontally and vertically.
CSS Background-attachment Property: The property background-attachment property in CSS is used to specify the kind of attachment of the background image with respect to its container.
CSS Background-position Property: In CSS body-position property is mainly used to set an image at a certain position.
CSS Background-origin Property: The background-origin is a property defined in CSS which helps in adjusting the background image of the webpage.
CSS Background-clip Property: The background-clip property in CSS is used to define how to extend background (color or image) within an element.
Background color Property: This property specifies the background color of an element. A color name can also be given as : “green”, a HEX value as “#5570f0”, an RGB value as “rgb(25, 255, 2)”. Syntax:
body {
   background-color:color name
}
Example:
HTML
<!DOCTYPE html><html> <head>    <style>        h1 {            background-color: blue;        }    </style></head> <body>    <h1>Geeksforgeeks</h1></body> </html>
Output:  
Background Image Property: 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: 
HTML
<!DOCTYPE html><html> <head>     <style>        body {            background-image:url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");        }    </style></head> <body>    <h1>Geeksforgeeks</h1></body> </html>
Output:  
Background repeat Property: By default the background image property repeats the image both horizontally and vertically. Syntax: To repeat an image horizontally
body {
   background-image:link;
   background-repeat: repeat:x;
}
Example:
HTML
<!DOCTYPE html><html> <head>    <style>        body {            background-image:url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");            background-repeat: repeat-x;        }    </style></head> <body>    <h1>"Hello world"</h1></body> </html>
Output:
Background-attachment Property: This property is used to fix the background ground image.The image will not scroll with the page. Syntax: 
body {
   background-attachment: fixed;
}
Example: 
HTML
<!DOCTYPE html><html> <head>    <style>        body {            background-image:url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");            background-attachment: fixed;        }    </style></head> <body>    <h1>Geeksforgeeks</h1></body> </html>
Output: 
Background-position Property: This property is used to set the image to a particular position. Syntax : 
body {
   background-repeat:no repeat;
   background-position:left top;
}
Example: 
html
<!DOCTYPE html><html> <head>    <style>        body {            background-image:url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");            background-repeat: no-repeat;            background-position: center;        }    </style></head> <body>    <h1>Geeksforgeeks</h1></body> </html>
Output: 
Vijay Sirra
yashjadhav1502
ysachin2314
shubhamyadav4
CSS-Basics
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?