The background effects for elements are specified using the CSS background properties. Many different properties can be used to design the background.
//Html
<div>Codeshruta</div>
//CSS
div{
background : #ccc;
}
The HTML elements are effected by the following five CSS background properties:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color
In CSS, the background-color property is used to define an element’s background color. A valid color name, like “red,” or a HEX value, like “#000000,” and an RGB value, like “rgb(25,0,0),” are the most common ways to specify a color in CSS.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h4{
background-color: #f9e1f1;
} p{
background-color: #ccc;
}
</style>
</head>
<body>
<h4>Codeshruta</h4>
<p>background-color</p>
</body>
</html> 
In order for persons with low vision disorders to be able to read the content of the page, it is essential to ensure that the contrast ratio between the color of the background and the color of the text written over it is high enough.By contrasting the luminance of the text and background color values, color contrast ratio is calculated.
background-image
An image can be set as an element’s background using the background-image property. By default, the image completely encloses the component. For a page like this, you can change the background image.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url("https://source.unsplash.com/Z8dtTatMVMw");
}
</style>
</head>
<body>
<h1>Codeshruta</h1>
</body>
</html> 
Assistive technology does not receive any extra background image information from browsers. This is important, especially for screen readers, as they won’t signal their presence and won’t be able to communicate anything to their users as a result. It is preferable to provide a semantic description of the image in the document if it contains information that is essential to comprehending the page’s overall goal.
CSS Introduction for web developers
background-repeat
The background-image attribute repeats the background image both vertically and horizontally by default. Only some photos are replicated vertically or horizontally. If the image is only repeated horizontally, the background will seem nicer.
Example:
background-repeat: repeat-x;
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url("https://source.unsplash.com/Z8dtTatMVMw");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Codeshruta</h1>
</body>
</html> 
background-repeat: repeat-y;
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url("https://source.unsplash.com/Z8dtTatMVMw");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Codeshruta</h1>
</body>
</html> 
background-attachment
To specify whether the background image is fixed or scrolls with the rest of the page in the browser window, use the background-attachment attribute. If the background image is fixed, the browser’s scrolling will not cause the image to move.
background-repeat: no-repeat;
background-attachment: fixed; Relative to the viewport, the background has a fixed value. Although an element may scroll, the backdrop does not scroll with the element. Local backgrounds are fixed in relation to the contents of the element.
The background scrolls with the element’s contents if the element has a scrolling mechanism, and the background painting area and background positioning area are related to the scrollable region of the element rather than to the border enclosing it.
The background is fixed in relation to the element itself and does not scroll with its contents when the scroll value is used.
background-position
The starting location of the background image is specified by the background-position property. The background image is by default positioned at the top-left of the webpage. The positions can be set to centre, top, bottom, and left, right.
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 200px;
height: 900px;
background-image: url("https://source.unsplash.com/Z8dtTatMVMw");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<h1>Codeshruta</h1>
</body>
</html>
Background Shorthand
It is also feasible to declare all background properties in a single property to reduce the length of the code. An example of a shorthand property is this.
//without shorthand
body{
background-color: #ccc;
background-image: url("https://source.unsplash.com/Z8dtTatMVMw");
background-repeat: no-repeat;
background-position: center;
}
//With shorthand
body{
background : #ccc url("https://source.unsplash.com/Z8dtTatMVMw" no-repeat center;
}Background-color, Background-image, Background-Repeat, Background-Attachment, and Background-Position are specified in that order when using the shorthand property. If all the property values are present and in this order, it doesn’t matter if one of them is absent. Output of the above code:
Conclusion
Background Properties in css are really helpful when we need a website with background elements. We create an awesome design using this property. In this blog we have covered all the important points related to background properties. If you have any questions or problems, then don’t forget to comment below.
Thankyou for reading!
Written by : Vipin
Pingback: CSS Colors Property — CodeShruta