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:
Please Login to comment...