Sometimes having a background on one or two elements on a webpage can really pump up its overall look and feel. You can have the backgrounds cover their containers with, at the same time, sitting behind their element's text content. Where pure HTML images may fail the job, CSS background images can cover up easily, and pretty powerfully!
We can do alot with element backgrounds in CSS: we can have images, repeated patterns, linear or radial gradients, parallax effects and so much more that we have a whole unit dedicated to learning CSS backgrounds!
CSS backgrounds are equipped with a decent number of properties to play with the backgrounds of elements through changing their size, their fixed origin position, repeating patterns, scroll behavior, gradient positions etc.
Talking about this unit, specifically, we will be discovering the following properties in it:
background-colorto apply background colors to elements
background-imageto set a background image/images on elements
background-sizeto reduce or enlarge the size of the background images attached
background-positionto specify the position of the background images attached
background-originindicating the origin point of the background image
- And it goes on..