Tutorial 16 of 44 in series

CSS Backgrounds

Control element backgrounds

Abhishek Sharma 2026-05-30 Web Development / Frontend / CSS

36%

Backgrounds

Backgrounds add color, images, and gradients behind element content.

Demo: Background Variations

HTML

<div class="solid">Solid color</div>
<div class="gradient">Gradient</div>
<div class="image">Image background</div>
<div class="multiple">Multiple backgrounds</div>

CSS

div { padding: 24px 16px; margin: 4px 0; border-radius: 8px; color: white; font-weight: bold; text-align: center; }
.solid { background: #6366f1; }
.gradient { background: linear-gradient(135deg, #6366f1, #ec4899); }
.image {
background: url("data:image/svg+xml,%3Csvg width=%2240%22 height=%2240%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%222%22 fill=%22white%22/%3E%3C/svg%3E") repeat;
background-color: #1e293b;
}
.multiple {
background: 
linear-gradient(135deg, rgba(99,102,241,0.8), rgba(236,72,153,0.8)),
url("data:image/svg+xml,%3Csvg width=%2260%22 height=%2260%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ccircle cx=%2230%22 cy=%2230%22 r=%223%22 fill=%22white%22/%3E%3C/svg%3E") repeat;
}

Live Output Window

Background Properties

Property	What It Does
`background-color`	Solid color behind content
`background-image`	Image or gradient
`background-repeat`	How the image tiles (`repeat`, `no-repeat`, etc.)
`background-position`	Where the image is placed (`center`, `top left`, etc.)
`background-size`	Image dimensions (`cover`, `contain`, or explicit)
`background-attachment`	Fixed or scrolls with content
`background`	Shorthand for all the above

Shorthand

background: #6366f1 url("bg.png") no-repeat center / cover;

This sets color, image, repeat, position, and size in one line.

Keep learning

Related tutorials from across the library.

All tutorials

Tutorial2026-05-30

Introduction to CSS

Learn what CSS is and why it matters

Web Development / Frontend / CSS

CSSWeb Development

Tutorial2026-05-30

History of CSS

Understand how CSS evolved

Web Development / Frontend / CSS

CSSWeb Development

Tutorial2026-05-30

Adding CSS

Three ways to add CSS to a page

Web Development / Frontend / CSS

CSSWeb Development