Web Analytics
☕ Coffee 𝕏 Follow
0%

CSS Backgrounds

Beginner ~10 min read

Background Color

The background-color property sets the background color. Use any CSS color value.

HTML
CSS
JS

Linear Gradients

Create smooth color transitions with linear-gradient(). Specify direction and colors.

HTML
CSS
JS

Radial Gradients

radial-gradient() creates circular or elliptical gradients radiating from a center point.

HTML
CSS
JS

Background Size

Control background image size with background-size: cover, contain, or specific dimensions.

HTML
CSS
JS

Background Position

Position backgrounds with background-position: keywords, percentages, or pixels.

HTML
CSS
JS

Background Repeat

Control tiling with background-repeat: repeat, no-repeat, repeat-x, repeat-y.

HTML
CSS
JS
Pro Tip: Use background-size: cover for hero sections to ensure the background always fills the container while maintaining aspect ratio!

Summary

  • background-color - Solid background color
  • linear-gradient() - Linear color transitions
  • radial-gradient() - Circular/elliptical gradients
  • background-size - cover, contain, or dimensions
  • background-position - Position the background
  • background-repeat - Control tiling behavior

Quick Quiz

Which background-size value ensures the image covers the entire container?

A
contain
B
cover
C
auto
D
100%
Previous Responsive Design
Next Shadows