Nearby lessons

7 of 19

πŸ–ΌοΈ CSS Background Properties

🎨 What are CSS Background Properties?

CSS Background Properties let you control the appearance of an element's background, including color, images, positioning, repetition, and sizing. These properties help create visually rich layouts and user experiences.

πŸ“‹ Background Color

The background-color property sets the background color of an element using a color name, HEX, RGB, RGBA, or HSL format.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

πŸ–ΌοΈ Background Image

The background-image property sets an image or gradient as the background of an element.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

πŸ” Background Repeat

The background-repeat property controls whether and how a background image is repeated.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

πŸ“Œ Background Attachment

The background-attachment property determines if the background scrolls with the content or stays fixed.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

🎯 Background Position

The background-position property sets the starting position of a background image.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

πŸ“ Background Size

The background-size property defines the size of the background image.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

πŸ“ Background Shorthand

The background shorthand allows combining background properties in one line.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

🧠 Test Your Knowledge

5 Questions

Progress: 0 / 5
Keep Going!CSS - Borders