CSS Backgrounds Introduction

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:

1. background-color to apply background colors to elements
2. background-image to set a background image/images on elements
3. background-size to reduce or enlarge the size of the background images attached
4. background-position to specify the position of the background images attached
5. background-origin indicating the origin point of the background image
6. And it goes on..