Quick reference guide for all CSS background properties, values, and common patterns. Perfect for developers who need fast access to syntax and examples.
background-color: value;#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 |
Inherit text color |
/* 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: none | url() | gradient;none |
No background image |
url('path.jpg') |
Image from URL |
linear-gradient() |
Linear gradient |
radial-gradient() |
Radial gradient |
conic-gradient() |
Conic gradient |
/* 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');/* 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
);/* 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
);/* 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
);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 |
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 |
Repeat both directions (default) |
repeat-x |
Repeat horizontally only |
repeat-y |
Repeat vertically only |
no-repeat |
Don't repeat |
space |
Repeat with space between |
round |
Repeat and stretch to fill |
scroll |
Scrolls with content (default) |
fixed |
Fixed to viewport |
local |
Scrolls with element content |
border-box |
Position relative to border |
padding-box |
Position relative to padding (default) |
content-box |
Position relative to content |
border-box |
Extends to border (default) |
padding-box |
Extends to padding edge |
content-box |
Extends to content edge |
text |
Clips to text (webkit prefix) |
background:
[image]
[position] / [size]
[repeat]
[attachment]
[origin]
[clip]
[color];/* 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;/* 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);/* 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;/* 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;background: repeating-linear-gradient(
45deg,
#000,
#000 10px,
#111 10px,
#111 20px
);background-color: #000;
background-image:
radial-gradient(circle, #333 1px, transparent 1px);
background-size: 20px 20px;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;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;Keep this reference handy for your projects