Explore all CSS color formats and every background property — solid color, image, gradient, position, repeat, and attachment.
CSS has four color syntaxes. hex is compact. rgb/rgba gives intuitive R,G,B control. hsl/hsla is easiest for adjusting hue, saturation, and lightness. The alpha channel controls transparency.
<!DOCTYPE html>
<html><head>
<style>
div { padding: 12px 16px; margin: 6px 0; border-radius: 6px; font-family: sans-serif; font-size: 14px; }
.hex { background: #3b82f6; color: white; }
.rgb { background: rgb(239, 68, 68); color: white; }
.rgba { background: rgba(239, 68, 68, 0.45); color: #333; }
.hsl { background: hsl(142, 71%, 45%); color: white; }
.hsla { background: hsla(142, 71%, 45%, 0.45); color: #333; }
.named { background: goldenrod; color: #333; }
</style>
</head><body style="padding:16px">
<div class="hex">#3b82f6 — hex</div>
<div class="rgb">rgb(239, 68, 68)</div>
<div class="rgba">rgba(239, 68, 68, 0.45) — semi-transparent</div>
<div class="hsl">hsl(142, 71%, 45%)</div>
<div class="hsla">hsla(142, 71%, 45%, 0.45) — semi-transparent</div>
<div class="named">goldenrod — named color</div>
</body></html>opacity fades the whole element including its children. Use rgba/hsla on the specific property instead when you only want to change one color's transparency — not the entire element.
<!DOCTYPE html>
<html><head>
<style>
.box { padding: 16px; border-radius: 8px; background: steelblue; color: white; font-family: sans-serif; margin: 8px 0; }
.full { opacity: 1; }
.half { opacity: 0.5; } /* text and bg both fade */
.rgba { background: rgba(70, 130, 180, 0.5); opacity: 1; } /* only bg is transparent */
</style>
</head><body style="padding:16px">
<div class="box full">opacity: 1 — fully opaque</div>
<div class="box half">opacity: 0.5 — text and background both fade</div>
<div class="box rgba">rgba background, opacity: 1 — text stays sharp</div>
</body></html>background-color fills with a solid color. background-image overlays an image. background-size: cover fills the area (may crop); contain fits the whole image inside (may leave gaps).
<!DOCTYPE html>
<html><head>
<style>
body { font-family: sans-serif; padding: 16px; }
.solid { background-color: #dbeafe; padding: 24px; border-radius: 8px; margin: 8px 0; }
.cover {
background-image: url("https://picsum.photos/seed/csscourse/800/400");
background-size: cover;
background-position: center;
height: 120px; border-radius: 8px; margin: 8px 0;
}
.contain {
background-image: url("https://picsum.photos/seed/csscourse/800/400");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: #f5f5f5;
height: 120px; border-radius: 8px; margin: 8px 0;
}
</style>
</head><body>
<div class="solid">Solid background color</div>
<p style="font-size:12px;color:#888">cover — fills area, may crop</p>
<div class="cover"></div>
<p style="font-size:12px;color:#888">contain — fits inside, shows bg-color in gaps</p>
<div class="contain"></div>
</body></html>Gradients are images in CSS. linear-gradient goes in a direction; radial-gradient radiates from a point; conic-gradient sweeps like a pie chart. Use them anywhere background-image is accepted.
<!DOCTYPE html>
<html><head>
<style>
div { height: 60px; border-radius: 8px; margin: 8px 0; }
.linear { background: linear-gradient(to right, #3b82f6, #8b5cf6); }
.angle { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.multi { background: linear-gradient(to right, #06b6d4, #3b82f6, #8b5cf6); }
.radial { background: radial-gradient(circle, #fff 0%, #3b82f6 100%); }
.conic { background: conic-gradient(from 0deg, #f59e0b, #ef4444, #3b82f6, #f59e0b);
border-radius: 50%; width: 60px; height: 60px; }
</style>
</head><body style="padding:16px">
<div class="linear"></div>
<div class="angle"></div>
<div class="multi"></div>
<div class="radial"></div>
<div class="conic"></div>
</body></html>background-position sets where the image origin is placed. background-repeat controls tiling — repeat, no-repeat, space (evenly distributed), or round (scaled to fit whole tiles).
<!DOCTYPE html>
<html><head>
<style>
.box {
background-image: url("https://picsum.photos/seed/bgpos/200/200");
background-size: 60px 60px;
height: 130px; border-radius: 8px; margin: 8px 0; border: 1px solid #e5e7eb;
}
.tl { background-position: top left; background-repeat: no-repeat; }
.center { background-position: center; background-repeat: no-repeat; }
.repeat { background-repeat: repeat; }
.space { background-repeat: space; }
</style>
</head><body style="padding:16px;font-family:sans-serif;font-size:13px;color:#555">
<p>top left, no-repeat</p><div class="box tl"></div>
<p>center, no-repeat</p><div class="box center"></div>
<p>repeat</p><div class="box repeat"></div>
<p>repeat: space</p><div class="box space"></div>
</body></html>background-attachment: fixed keeps the background image anchored to the viewport while the page scrolls, creating a parallax effect. scroll (default) moves with the element.
<!DOCTYPE html>
<html><head>
<style>
body { margin: 0; font-family: sans-serif; }
.hero {
background-image: url("https://picsum.photos/seed/attach/1200/600");
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.hero span {
background: rgba(0,0,0,0.55);
color: white;
padding: 12px 24px;
border-radius: 6px;
font-size: 18px;
font-weight: bold;
}
.content { padding: 24px; background: white; }
</style>
</head><body>
<div class="hero"><span>background-attachment: fixed</span></div>
<div class="content">
<p>Scroll inside this preview — the background stays fixed while this content moves over it.</p>
<p>This creates a classic parallax-style effect with a single CSS property.</p>
<p>More content here to make the page scrollable...</p>
</div>
</body></html>