CSS Background
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: } </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: 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: 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: background-repeat: no-repeat; background-position: center; } </style></head><body> <h1>Geeksforgeeks</h1></body></html> |
Output:
.png)
.png)
