Background Images, Size and Position
What Is It?
Background images decorate an element behind its content. Separate properties control repetition, size, position, and the area used to paint the background.
Properties, Tags and Attributes Explained
background-repeat: Controls tiling: repeat, repeat-x, repeat-y, or no-repeat.background-size: Sets image dimensions; cover fills the area with possible cropping, contain fits the complete image.background-position: Places an image inside its positioning area.background-origin: Chooses the positioning area: padding-box by default.background-clip: Chooses how far the background is painted.background-attachment: scroll follows the element; local follows its scrolling content; fixed usually anchors to the viewport.background-image: Supplies one or more background image layers, including gradients or URL resources. The first listed layer paints on top.background: Shorthand combining image, position, size, repeat, attachment, origin, clip, and color. A slash separates position from size. Omitted parts reset to their initial values.
Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.
Example 1: Tile a pattern
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Images, Size and Position</title>
<style>
.demo { height: 140px; background-image: radial-gradient(#2563eb 3px, transparent 4px); background-size: 24px 24px; background-repeat: repeat; }
</style>
</head>
<body>
<div class="demo" aria-label="Decorative dotted pattern"></div>
</body>
</html>What you see: The generated dot image repeats in 24px tiles.
Example 2: Place one decoration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Images, Size and Position</title>
<style>
.demo { height: 150px; background-color: #eff6ff; background-image: radial-gradient(circle, #7c3aed 40%, transparent 42%); background-size: 80px 80px; background-repeat: no-repeat; background-position: right 12px bottom 12px; }
</style>
</head>
<body>
<div class="demo">A decoration in the corner</div>
</body>
</html>What you see: A single purple circle sits near the bottom right.
Example 3: Clip the fill
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Images, Size and Position</title>
<style>
.demo { border: 12px dashed #64748b; padding: 24px; background: #fde68a; background-clip: content-box; }
</style>
</head>
<body>
<div class="demo">Only the content area is yellow.</div>
</body>
</html>What you see: The padding and gaps in the dashed border do not receive the yellow fill.
Example 4: Position from the content box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Images, Size and Position</title>
<style>
.box { padding: 24px; border: 8px dashed #64748b; background-color: #eff6ff; background-image: linear-gradient(#2563eb, #2563eb); background-size: 24px 24px; background-repeat: no-repeat; background-origin: content-box; background-position: left top; }
</style>
</head>
<body>
<div class="box">The blue square begins at the content edge.</div>
</body>
</html>What you see: background-origin places the square relative to the content area rather than the default padding area. Use it for precisely inset decorative backgrounds.
Example 5: Scroll the background with the content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Images, Size and Position</title>
<style>
.box { height: 130px; overflow: auto; background-image: repeating-linear-gradient(#dbeafe 0 20px, #ffffff 20px 40px); background-attachment: local; padding: 12px; }
p { margin: 20px 0; }
</style>
</head>
<body>
<div class="box" tabindex="0" role="region" aria-label="Background scrolling demo"><p>First stripe</p><p>Second stripe</p><p>Third stripe</p><p>Fourth stripe</p><p>Fifth stripe</p></div>
</body>
</html>What you see: The striped background moves with the scrollable content. Change local to scroll to compare a background tied to the box. Use local for lined scrolling areas.
When and Where to Use It
Use background images for textures, decorative heroes, and layered patterns. Use an img element for meaningful content that needs alternative text.
Common Mistake or Useful Tip
The background shorthand resets omitted background subproperties. Set the shorthand before more specific overrides.
Try It Yourself
Change the circle position to left top and compare repeat with no-repeat.