Comprehensive Guide To HTML background Images (Live Coding)

Detailed coverage of HTML background images with various aspects like positioning, repeat control, adjusting sizes, attachment, origin and clipping.

00:00 Introduction
00:23 Uses of background images
01:00 What to expect in this video
01:44 Setup VSCode for live coding (Adding/linking HTML and CSS)
04:08 Creating background images to use in this tutorial
04:55 Creating your first background image
05:48 background-image CSS property
06:48 How to add background images via internal styling
07:23 Repetition of background image
07:52 background-repeat CSS property
08:09 Demo - Values of background-repeat (repeat, no-repeat, repeat-x, repeat-y)
09:05 Controlling size of background image
09:31 background-size CSS property
10:01 How to use background-size cover (usage demo)
11:14 How to use background-size contain (usage demo)
14:42 Custom width and height of background images (px, %, em and rem)
20:26 Controlling position of background image
22:50 Sticky background images via background-attachment CSS property (scroll, fixed and local)
25:00 Behavior of background-image local explained in detail with demo
28:02 Controlling origin of background image via background-origin CSS property
32:31 Controlling clipping of background image via background-clip CSS property

#htmlbackgroundimages #webdevelopment