CSS
handbook

a video guide to CSS Backgrounds properties

Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.

background-attachment

background-clip

background-color

background-image

background-origin

background-position

background-repeat

background-size

background

FAQs

about CSS backgrounds, and background-images.

What is the difference between background-color and background-image?

background-color sets the color of the background of an element, while background-image sets an image as the background of an element.

What is background-position used for?

background-position sets the position of a background image within its container. It can be set using keywords (such as top or center) or by specifying an exact pixel or percentage value.

What is the difference between background-repeat: repeat and background-repeat: no-repeat?

background-repeat: repeat tiles the background image both horizontally and vertically to fill the entire container, while background-repeat: no-repeat displays the image only once, without tiling.

What is background-size used for?

background-size sets the size of a background image. It can be set using keywords (such as cover or contain) or by specifying an exact pixel or percentage value.

What does background-attachment: fixed do?

background-attachment: fixed fixes the background image in place, so that it remains stationary while the page scrolls.

Copyright 2023