The CSS background properties are used to define the background effects for HTML elements.
The background-color property specifies the background color of an element.
<div class="bgcolor">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
<style>
.bgcolor {
background-color: lightblue;
padding: 10px;
}
</style>
The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element width and height. While using background image, be careful not to affect the readability of the text contents.
<div class="bgimage">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
<style>
.bgimage {
background-image: url("background.jpg");
padding: 10px;
}
</style>
When using a background image, use an image that does not disturb the text or change the color text to maintain readability.
By default, if the image being used as the background-image is smaller than the content width and height, it tends to both horizontally and vertically to cover the content. Some images should be repeated only horizontally or vertically to make them look visually appealing. Either repeat-x or repeat-y should be used in such cases while no-repeat can be used to avoid image repetition.
.bgimage {
background-image: url("background.jpg");
background-repeat: repeat-x; // repeats horizontally
}
If the background image is smaller than the HTML element size where it is being used as background, you can set the repetition to no-repeat and also position such background image using directional properties like left, right, top or bottom.
<div class="bgimage">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<style>
.bgimage {
background: lightblue url("logo-icon.png");
background-repeat: no-repeat;
background-position: right bottom;
padding:15px;
}
</style>
You can also create a parallax effect making the background image fixed and preventing it from scrolling with the flow of the web page scrolling using background-attachment property.
.fixed {
background-image: url("background.jpg");
background-attachment: fixed;
}
Multiple CSS properties can be written as one single value which is termed as shorthand property. CSS background values can also be written using shorthand property as shown below.
.shorthand {
background: #ffffff url("background.jpg") no-repeat left top;
}
When using the shorthand property, the property values must be in the order as shown below.
Any number of property values can go missing from the shorthand as long as the other ones are in the order.
CSS allows you to add multiple background images for an element using the background-image property. The background images are separated by commas and the images are stacked on top of each other where the first image is closest to the viewer.
.multiple{
background-image: url(background.jpg), url(web-design.jpg);
background-position: right top, left top;
background-repeat: no-repeat, no-repeat;
}
// Shorthand
.multiple{
background: url(background.jpg) right top no-repeat, url(web-design.jpg) left top no-repeat;
}
The CSS background-size property allows you to specify the size of background images in lengths, percentages or by using one of the two values contain or cover.
.size{
background: url(background.jpg);
background-size: 500px 100px;
background-repeat: no-repeat;
}
The contain value scales the background image to be as large as possible with its width and height positioned inside the content area. Depending on the proportions of the background image and the background positioning area, there may be some areas of the background which are not covered by the background image.
.contain{
background:url(background.jpg) no-repeat;
background-size:contain;
padding:10px;
}
The cover keyword scales the background image so that the content area is completely covered by the background image horizontally as well as vertically. Some parts of the background image may not be visible in the background positioning area.
.cover{
background:url(background.jpg) no-repeat;
background-size:cover;
padding:10px;
}
The CSS background-origin property specifies the alignment position of the left top edge of the background image to the HTML element. The optional property values are as follows:
.origin{
border: 3px solid #333;
padding: 20px;
background: url(background.jpg);
background-repeat: no-repeat;
background-origin: content-box;
}
The CSS background-clip property identical to the background origin property with identical options and effects. It is generally used for background colors while background origin is used for background images.
.clip{
border: 5px dotted black;
padding: 20px;
background: lightblue;
background-clip: border-box;
}
The css background-blend-mode property allows you to blend two background images together and create special background effects using the blending options like screen, color-burn, lighten, darken, multiply, exclusion, difference, overlay, etc. CSS background-blend-mode option accepts any color blending option that you can find on photo editing applications like Adobe Photoshop.
.blend {
background: url(background.jpg),url(web-code.jpg);
background-blend-mode: screen;
}
Leave a comment