CSS Backgrounds
Download (.odt) Download (Markdown)Single color background
[hook]Background-color can have the following values:
English name of a color - white, black, blue, gray/grey etc.
RGB/RGBA (red-green-blue(-alpha)) code - rgb(255, 255, 255), rgba(255, 255, 255, 0.5)
HEX code (RGB/RGBA converted into hexadecimal numbers) - #000000 (or #000 in a short form), #11111122 (also includes transparency)
HSL/HSLA (hue-saturation-lightness(-alpha)) code - hsl(241, 44%, 59%), hsla(241, 44%, 59%, 0.5)
Image background
[hook]Background-image property calls the url function, which gets the path (relative path from CSS code file or absolute path) to the image file.
Background-repeat
[hook]Background-repeat property can have to following values:
no-repeat - display image once
repeat-x - repeat image horizontally
repeat-y - repeat image vertically
repeat (default value) - repeat both horizontally and vertically
round - repeat image in both directions, images are stretched to fill the whole element without clipping
space - repeat image in both directions without clipping, remaining space is distributed evenly between the images
Pro tip: if you use the no-repeat or space values, you can provide an extra background-color to fill the gaps (order of properties doesn't matter).
Background-position
[hook]Background-position property defines the position of the image inside the element (top-left corner in the example code).
First value can be left, right, center, percentage (e.g. 5%), number-unit (e.g. 5px).
Second value can be top, bottom, center, percentage (e.g. 5%), number-unit (e.g. 5px).
Percentages and number-units are counted from top left corner.
Background-attachment
[hook]Background-attachment defines how background image can be scrolled.
fixed - image always stays at a fixed position
scroll (default value) - image can be scrolled with the page but can't be scrolled with the element (if the element has a separate scrollbar)
local - image can be scrolled with both the page and the element
Background-size
[hook]Background-size defines the size of the image.
auto (default value) - display image in original size
width height (e.g. 20px 50px) - display image in a specific width and height (values can be any number-unit pairs, percentages or auto)
cover - image fills the whole element (one of the edges of the image is cut off if necessary)
contain - image is resized to fit the width or height of the element, keeping the full image visible
Background-origin
[hook]Background-origin defines where to start displaying image (top-left corner) based on box model. Values can be border-box, padding-box (default), content-box.
Background-clip
[hook]Background-clip defines how far image/color can extend on all sides of the element based on box model. Values can be border-box (default), padding-box, content-box.
Background
[hook]Shorthand property for the following properties: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment. It has to contain a background-color or a background-image value (or both), the rest are optional. Order of values doesn't matter.
Content warning! If you have epilepsy, don't scroll further, as you may encounter disturbing visual effects.
Gradient background
[hook]Gradients are handled as images in CSS, using background-image property with gradient functions instead of url.
These functions have to be provided with two or more colors in any format.
Linear gradient
[hook]Vertical (default):
background-image: linear-gradient(blue, red);
Horizontal:
background-image: linear-gradient(to right, blue, red);
Diagonal:
background-image: linear-gradient(to bottom right, blue, red);
With angle:
background-image: linear-gradient(70deg, blue, red);
More than two colors (can also be horizontal, diagonal):
background-image: linear-gradient(blue, red, green);
Radial gradient
[hook]Default:
background-image: radial-gradient(red, blue);
Different spacing:
background-image: radial-gradient(red 15%, blue 40%);
(0%-15% solid red, 15%-40% gradient, 40%-100% solid blue)
Circle shape (can be combined with percentages seen above):
background-image: radial-gradient(circle, red, blue);
More than two colors (can be combined with other options):
background-image: radial-gradient(red, green, blue);
Conic gradient
[hook]Default:
background-image: conic-gradient(red, blue);
More than two colors (can be combined with other options):
background-image: conic-gradient(red, green, blue, purple, yellow);
With degrees:
background-image: conic-gradient(red 70deg, green 100deg, blue 300deg);
With specified starting angle:
background-image: conic-gradient(from 100deg, red, green, blue);
With specified center position:
background-image: conic-gradient(at 30% 70%, red, green, blue);
Repeating gradients
[hook]Percentages provided along with colors present percentages of element height/width.
Repeating linear gradient (can be combined with linear gradient options):
background-image: repeating-linear-gradient(blue, red 10%, yellow 20%);
Repeating radial gradient (can also be circle):
background-image: repeating-radial-gradient(blue, red 10%, yellow 20%);
Repeating conic gradient (can be combined with conic gradient options):
background-image: repeating-conic-gradient(blue, red 10%, yellow 20%);
Repeating conic gradient with full color stops:
background-image: repeating-conic-gradient(blue 0deg 10deg, red 10deg 20deg, yellow 20deg 30deg);