Chapter 12: CSS Background

A Complete Frontend Developer Textbook for Beginners (2023 Edition)

This is the textbook version of Lesson 12 of 100 from the Udemy video course: A Complete Frontend Developer Course for Beginners

← Chapter 11: CSS Colors in RGB and HSL

← Table of Contents

Overview

This lesson covers the following HTML tags, CSS properties, and JavaScript commands for the first time:

HTML

None.

CSS

1. background-image
2. background-blend-mode
3. background-size
4. background-repeat
5. background-origin
6. background-position
7. background-attachment
8. box-sizing

JS

None.

This lesson begins with this Codepen. Code along with me to increase retention!

Lecture

In this lesson, we cover all the background properties which mostly relate to the background-image. Finally, we combine them all into a nice shorthand!

HTML Window: