CSS Background Cheat Sheet - Quick Reference Guide

Colors Images Gradients Position & Size Repeat & Attachment Initial Values Shorthand Black Backgrounds Patterns

background-color

Syntax

background-color: value;

Common Values

`#000`	Hex color (black)
`rgb(0, 0, 0)`	RGB color
`rgba(0, 0, 0, 0.8)`	RGB with alpha
`black`	Named color
`transparent`	Fully transparent
`currentColor`	Uses the element's current text color

Black Background Examples

/* Pure black */
background-color: #000;

/* Semi-transparent black */
background-color: rgba(0, 0, 0, 0.9);

/* Off-black */
background-color: #0a0a0a;

/* CSS variable */
background-color: var(--black, #000);

background-image

Syntax

background-image: none | url() | gradient;

Value Types

`none`	No background image
`url('path.jpg')`	Image from URL
`linear-gradient()`	Linear gradient
`radial-gradient()`	Radial gradient
`conic-gradient()`	Conic gradient

Examples

/* Single image */
background-image: url('bg.jpg');

/* Multiple images */
background-image: 
    url('overlay.png'),
    url('main-bg.jpg');

/* Image with gradient */
background-image: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('hero.jpg');

CSS Gradients Quick Reference

Linear Gradients

/* Direction keywords */
background: linear-gradient(to bottom, #000, #333);
background: linear-gradient(to right, #000, #111);
background: linear-gradient(to bottom right, #000, #222);

/* Angle */
background: linear-gradient(45deg, #000, #333);
background: linear-gradient(0.25turn, #000, #111);

/* Multiple color stops */
background: linear-gradient(#000 0%, #111 50%, #000 100%);

/* Repeating */
background: repeating-linear-gradient(
    45deg,
    #000,
    #000 10px,
    #111 10px,
    #111 20px
);

Radial Gradients

/* Basic */
background: radial-gradient(#333, #000);

/* Shape and size */
background: radial-gradient(circle, #333, #000);
background: radial-gradient(ellipse at center, #222, #000);

/* Position */
background: radial-gradient(at top left, #333, #000);
background: radial-gradient(at 20% 80%, #222, #000);

/* Size keywords */
background: radial-gradient(
    circle closest-side,
    #333, #000
);

/* Repeating */
background: repeating-radial-gradient(
    circle at center,
    #000 0px,
    #111 20px,
    #000 40px
);

Conic Gradients

/* Basic */
background: conic-gradient(#000, #333, #000);

/* From angle */
background: conic-gradient(from 45deg, #000, #333);

/* At position */
background: conic-gradient(at 30% 30%, #000, #333);

/* Color stops */
background: conic-gradient(
    #000 0deg,
    #333 90deg,
    #000 180deg,
    #333 270deg,
    #000 360deg
);

Position & Size Properties

background-position

`center`	Center horizontally and vertically
`top left`	Top left corner
`50% 50%`	Center using percentages
`10px 20px`	Specific pixel position
`right 10px bottom 20px`	Edge offsets

background-size

`cover`	Scale to cover entire container
`contain`	Scale to fit within container
`100% 100%`	Stretch to fill
`200px 100px`	Specific dimensions
`auto`	Natural size

Repeat, Attachment & Other Properties

background-repeat

`repeat`	Repeat both directions (default)
`repeat-x`	Repeat horizontally only
`repeat-y`	Repeat vertically only
`no-repeat`	Don't repeat
`space`	Repeat whole tiles, spreading extra space between them
`round`	Repeat, scaling tiles so a whole number fit

background-attachment

`scroll`	Scrolls with content (default)
`fixed`	Fixed to viewport
`local`	Scrolls with element content

background-origin

`border-box`	Position relative to border
`padding-box`	Position relative to padding (default)
`content-box`	Position relative to content

background-clip

`border-box`	Extends to border (default)
`padding-box`	Extends to padding edge
`content-box`	Extends to content edge
`text`	Clips to text (also add `-webkit-background-clip: text`)

All Background Properties and Initial Values

The background shorthand sets these eight longhands. Any longhand you leave out of the shorthand is reset to its initial value.

Property	Initial value	Other values
`background-color`	`transparent`	Any color
`background-image`	`none`	`url()`, gradients, `image-set()`
`background-position`	`0% 0%`	Keywords, lengths, percentages, edge offsets
`background-size`	`auto` (`auto auto`)	`cover`, `contain`, lengths, percentages
`background-repeat`	`repeat`	`repeat-x`, `repeat-y`, `no-repeat`, `space`, `round`
`background-attachment`	`scroll`	`fixed`, `local`
`background-origin`	`padding-box`	`border-box`, `content-box`
`background-clip`	`border-box`	`padding-box`, `content-box`, `text`
`background` (shorthand)	Each longhand's initial value	See the syntax below

background Shorthand Property

Syntax Order

background: 
    [image] 
    [position] / [size] 
    [repeat] 
    [attachment] 
    [origin] 
    [clip] 
    [color];

/* Rules: any order is allowed, except
   - size can only follow position, separated by "/"
   - if two box values appear, the first is origin, the second is clip
   - color is only allowed in the last layer
   - omitted longhands are reset to their initial values */

Common Patterns

/* Simple color */
background: #000;

/* Image with fallback */
background: url('bg.jpg') center/cover no-repeat #000;

/* Gradient */
background: linear-gradient(#000, #333);

/* Multiple backgrounds */
background: 
    url('top.png') top center no-repeat,
    url('bottom.png') bottom center no-repeat,
    #000;

/* Complex example */
background: 
    url('pattern.svg') 
    center center / 50px 50px 
    repeat 
    scroll 
    padding-box 
    border-box 
    #000;

Black Background Quick Reference

Solid Black Variations

/* Pure black */
background: #000;
background: rgb(0, 0, 0);
background: black;

/* Near-black shades */
background: #0a0a0a;  /* 4% lighter */
background: #111;     /* 7% lighter */
background: #1a1a1a;  /* 10% lighter */

/* Transparent blacks */
background: rgba(0, 0, 0, 0.95);
background: rgba(0, 0, 0, 0.8);
background: rgba(0, 0, 0, 0.5);

Black Gradients

/* Vertical fade */
background: linear-gradient(to bottom, #000, #333);

/* Radial spotlight */
background: radial-gradient(circle, #333 0%, #000 70%);

/* Corner glow */
background: radial-gradient(at top left, #222, #000);

/* Multiple gradients */
background: 
    radial-gradient(at 20% 80%, #111, transparent),
    radial-gradient(at 80% 20%, #0a0a0a, transparent),
    #000;

Black Overlays

/* Dark overlay on image */
background: 
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
    url('image.jpg') center/cover;

/* Gradient overlay */
background: 
    linear-gradient(to bottom, transparent, #000),
    url('hero.jpg') center/cover;

/* Vignette effect */
background: 
    radial-gradient(transparent 30%, rgba(0,0,0,0.8)),
    url('photo.jpg') center/cover;

Common Background Patterns

Striped Pattern

background: repeating-linear-gradient(
    45deg,
    #000,
    #000 10px,
    #111 10px,
    #111 20px
);

Dotted Grid

background-color: #000;
background-image: 
    radial-gradient(circle, #333 1px, transparent 1px);
background-size: 20px 20px;

Carbon Fiber

background: 
    linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
    linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
    linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
    #131313;
background-size: 20px 20px;

Checkerboard

background: 
    linear-gradient(45deg, #000 25%, transparent 25%),
    linear-gradient(-45deg, #000 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #000 75%),
    linear-gradient(-45deg, transparent 75%, #000 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;