On this page

CSS Backgrounds

Badar KhalilUpdated September 29, 2026 4 min read

What Are CSS Backgrounds?

CSS backgrounds paint the area behind an element's content and padding (and border, depending on settings). Our focus keyword is CSS backgrounds, and you will learn every background property, plus trending techniques: CSS background-size cover vs contain, multiple backgrounds, background-clip text (gradient text), background-blend-mode, CSS patterns without images, and responsive hero sections.

The Background Properties

Property	Purpose	Common values
`background-color`	Solid color behind everything	`#fff`, `transparent`
`background-image`	Image or gradient layer	`url(hero.jpg)`, `linear-gradient()`
`background-repeat`	Tiling behavior	`repeat`, `no-repeat`, `repeat-x`, `space`, `round`
`background-position`	Where the image sits	`center`, `top right`, `50% 20%`
`background-size`	Image scaling	`auto`, `cover`, `contain`, `200px 100px`
`background-attachment`	Scroll behavior	`scroll`, `fixed`, `local`
`background-origin`	Where position starts	`padding-box`, `border-box`, `content-box`
`background-clip`	Where the paint is cut off	`border-box`, `padding-box`, `content-box`, `text`
`background-blend-mode`	How layers blend	`multiply`, `overlay`, `screen`

background-color

The color is painted below all image layers. Always set a background color as a fallback in case an image fails to load, and to guarantee text contrast.

background-image

Accepts url(), gradients and image-set() for high-DPI images. Use CSS backgrounds for decorative images. If the image carries meaning, use an HTML <img> with alt text instead, because backgrounds are invisible to screen readers and search engines.

background-size: cover vs contain

cover scales the image to fill the whole box and crops the overflow. Best for hero sections.
contain scales the image so it fully fits inside the box, possibly leaving empty space.
auto uses the natural size. Two values set width and height, for example 40px 40px.

background-position and repeat

Position accepts keywords, lengths and percentages. Use center to focus the subject. The four-value syntax right 20px bottom 10px offsets from edges. For patterns, use repeat. For a single logo, use no-repeat.

background-attachment

fixed pins the background to the viewport for a simple parallax effect. It can be janky on mobile browsers, and iOS Safari historically ignores it, so test carefully.

background-clip and origin

background-clip: text with a transparent text color creates gradient text. Add -webkit-background-clip: text for older Safari and Chrome versions. padding-box and content-box help make borders and inner frames.

Multiple Backgrounds

Separate layers with commas. The first layer is on top. Only the last layer may contain a background-color in the shorthand.

Code

.hero {
  background:
    linear-gradient(to top, rgb(0 0 0 / 70%), transparent) ,
    url(hero.jpg) center / cover no-repeat,
    #0f172a;
}

The background Shorthand

Syntax order: background: color image position / size repeat attachment origin clip. Position and size must be written with a slash between them: center / cover. Remember that the shorthand resets every unspecified sub-property to its initial value, which can accidentally erase earlier settings.

background-blend-mode

Blend an image with the background color or another layer. Example: background-color: #2563eb; background-image: url(photo.jpg); background-blend-mode: multiply; gives a duotone look, a very trendy effect.

Patterns Without Images

Gradients can draw stripes, grids and dots using tiny repeating tiles, saving HTTP requests. Combine background-size with gradients to build any pattern.

Performance and Accessibility

Compress images and use modern formats (WebP, AVIF). Use image-set() for retina versions.
Large hero backgrounds affect LCP. For above-the-fold hero images, an <img> with fetchpriority='high' is often faster than a CSS background.
Always ensure text over images has enough contrast, using overlay gradients.
Do not put essential content in background images.

Best Practices

Set a fallback background-color.
Use cover plus center for hero backgrounds.
Add a dark gradient overlay for readable text.
Use the shorthand carefully, or use longhand properties for clarity.

Common Mistakes

Forgetting the slash in center / cover.
Placing a color in a non-final layer of the shorthand.
Expecting a background image to show without giving the element a height.
Using background-attachment: fixed on mobile without testing.

Summary

Backgrounds combine color, images and gradients in stackable layers. Learn size, position, repeat, clip and blend modes, and you can build heroes, patterns and gradient text with pure CSS. Try the examples below.

Try it Yourself HTML

<style>
  .box { width: 200px; height: 120px; margin: 6px; display: inline-block; border: 2px solid #334155; background: linear-gradient(135deg, #f59e0b, #ef4444) no-repeat; font: 12px sans-serif; color: #fff; }
  .cover { background-size: cover; }
  .contain { background-size: contain; }
  .fixed-size { background-size: 60px 60px; background-position: center; }
</style>
<div class='box fixed-size'>60px x 60px, centered</div>
<div class='box contain'>contain</div>
<div class='box cover'>cover</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  .hero { height: 200px; max-width: 420px; border-radius: 12px; display: flex; align-items: flex-end; padding: 16px; color: #fff; font-family: sans-serif;
    background:
      linear-gradient(to top, rgb(0 0 0 / 75%), transparent 70%),
      radial-gradient(circle at 80% 20%, #38bdf8, transparent 40%),
      linear-gradient(135deg, #1e3a8a, #7c3aed);
  }
</style>
<div class='hero'><h2>Readable text on a layered hero</h2></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  .gt { font: 800 56px/1.1 sans-serif; margin: 0; background: linear-gradient(90deg, #ec4899, #8b5cf6, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
</style>
<h1 class='gt'>Gradient Text</h1>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  .dots { height: 140px; border-radius: 10px; background-color: #f8fafc; background-image: radial-gradient(#94a3b8 2px, transparent 2px); background-size: 20px 20px; margin-bottom: 10px; }
  .grid { height: 140px; border-radius: 10px; background-color: #0f172a; background-image: linear-gradient(#334155 1px, transparent 1px), linear-gradient(90deg, #334155 1px, transparent 1px); background-size: 24px 24px; margin-bottom: 10px; }
  .stripes { height: 140px; border-radius: 10px; background: repeating-linear-gradient(45deg, #fde68a 0 12px, #fbbf24 12px 24px); }
</style>
<div class='dots'></div>
<div class='grid'></div>
<div class='stripes'></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  .duo { height: 180px; max-width: 420px; border-radius: 12px; background-color: #2563eb; background-image: linear-gradient(45deg, #f97316, #fde047 40%, #22c55e 70%, #0ea5e9); background-blend-mode: multiply; }
  .clip { margin-top: 12px; padding: 16px; border: 12px dashed #f97316; background: #2563eb; background-clip: content-box; color: #fff; font-family: sans-serif; max-width: 380px; }
</style>
<div class='duo'></div>
<div class='clip'>background-clip: content-box paints only inside the padding</div>

Output

Press Run to execute.

Exercise: Create a Hero With an OverlayHTML

Style .hero so it is 240px tall, uses two background layers (a dark gradient overlay from bottom to transparent on top, and a blue-to-purple linear gradient below), and has a fallback background color. The heading must be white and readable.

Try it Yourself HTML

<style>
  .hero { /* your code */ }
  .hero h2 { color: #fff; margin: 0; }
</style>
<div class='hero'><h2>Learn CSS Backgrounds</h2></div>

Output

Press Run to execute.

Show expected output

A 240px hero with a layered gradient and readable white text.

This is a self-check — compare your result with the expected output above.

Exercise: Make Gradient TextHTML

Use background-clip: text to give the h1 a horizontal gradient from orange to pink. Include the -webkit- prefixed version too.

Try it Yourself HTML

<style>
  h1 { font: 800 48px sans-serif; /* your code */ }
</style>
<h1>Gradient Heading</h1>

Output

Press Run to execute.

Show expected output

The heading text shows an orange to pink gradient.

This is a self-check — compare your result with the expected output above.

Quiz: CSS Backgrounds Quiz Pass 70%

Loading quiz…

Was this page helpful?