Making a splash

background-image

This property is used to specify an element's background using an image file or a color gradient.

Property values

Despite its name, this propery can be used to define a background with more than just image files.

none No background image
<url> The URL of a bitmap image file
linear-gradient() Colors that gradually transition from top to bottom
radial-gradient() Colors that gradually transition from the center to the edges
conic-gradient() Colors that gradually transition around a point
repeating-linear-gradient() A pattern made up from linear gradients
repeating-radial-gradient() A pattern made up from radial gradients
repeating-conic-gradient() A pattern made up from conical gradients

Here is an example of a simple image with a fallback color:

background-image: url(https://example.com/simple.png);
background-color: white;
background-image specified using a URL

Linear gradient

This algorithm expects a sequence of color-stops. It will evenly divide an imaginary line into color gradients transitioning from one to the other until the full line is covered. The colors along that line are displayed outwards in both directions (perpendicular and away from it).

Each color-stop spec may specify its position along the imaginary line using a percentage, from 0% to 100%.

The first argument to the algorithm may be the destination point for the imaginary line, specified using the form to [top|bottom] [left|right]. If the top|bottom is omitted, the gradient will proceed from left to right. If the left|right is omitted, the gradient will proceed from top to bottom.

The first argument may alternatively be a single value which specifies an angle for the imaginary line, using deg (degrees), rad (radians), grad (gradians), turn (1 turn of the circle).

/* linear gradient from top to bottom */            
background-image: linear-gradient(red, orange, yellow);

/* the same linear gradient with explicit positions */
background-image: linear-gradient(red 0%, orange 50%, yellow 100%);

/* linear gradient from top left to bottom right */
background-image: linear-gradient(to bottom right, red, orange, yellow);

/* linear gradient angled 45 degrees from north */
background-image: linear-gradient(45deg, red, orange, yellow);
background-image with linear gradient

Radial gradient

This algorithm expects a sequence of color-stops. It will evenly divide concentric circles into color gradients transitioning from one to the other until the background is completely traversed.

Each color-stop spec may specify its position along the imaginary line using a percentage, from 0% to 100%.

The first argument to the algorithm may be a shape and the center point specified using the form SHAPE at X Y, where SHAPE may be one of these keywords:

keyword description center point spec
circle radiate outward to the shortest dimension, then stop optional
ellipse radiate outward towards all four sides of the element optional
closest-side elliptically radiate outward towards nearest edge, then stop required
closest-corner elliptically radiate outward towards nearest corner, then stop required
farthest-side elliptically radiate outward towards farthest edge, then stop required
farthest-corner elliptically radiate outward towards farthest corner, then stop required

The centerpoint spec may be omitted when specifying circle or ellipse and the center of the element will be implied.

/* circular gradient */            
background-image: radial-gradient(circle, red, orange, yellow);

/* elliptical gradient */
background-image: radial-gradient(ellipse, red, orange, yellow);

/* the same elliptical gradient with explicit color-stop positions */
background-image: radial-gradient(red 0%, orange 50%, yellow 100%);

/* circular gradient with defined center point */
background-image: radial-gradient(circle at 100px 100px, red, orange, yellow);
background-image with radial gradient

Conic gradient

This algorithm expects a sequence of color-stops. It will evenly divide a circle into color gradients transitioning from one to the other until the full circle is covered.

Each color-stop may specify its units using deg (degrees), rad (radians), grad (gradians), turn (1 turn of the circle), % (percentage of the circle).

The first argument to the algorithm may be the initial angle and center point for the effect, specified as from ANGLE at X Y, where starting ANGLE is an offset from north, and X/Y is the offset from the box's top left corner.

/* a simple color wheel */            
background-image: conic-gradient(red, orange, yellow, green, blue, red);

/* the same color wheel with explicit angle stops */
background-image: conic-gradient(red 0deg, orange 60deg, yellow 120deg,
green 180deg, blue 240deg, purple 300deg, red 360deg);

/* the same color wheel with explicit starting ANGLE and X/Y center point */
background-image: conic-gradient(from 0deg at 50% 50%,
red, orange, yellow, green, blue, red);
background-image with conic gradient

Repeating gradients

Each of the image gradient algorithms may be made into repeating variants of the same algorithm, using the same arguments as described above. Simply prefix the name with repeating-.

Note that this will only be meaningful when the parameters define gradients that span less than the full background area.

background-image: repeating-radial-gradient(red 0%, green 5%, white 10%);
background-image with repeating radial gradient

Cross-fade

Two images can be overlaid and share a common transparency rule using the cross-fade keyword, which specifies the percent of the first image's opacity, and the percent of the scond image's transparency.

When used with JavaScript or CSS animations, this technique can provide a gradual fade-out/fade-in effect.

/* new syntax */
background-image: cross-fade(75% url(top.png), url(bottom.png));

/* old syntax */
background-image: cross-fade(url(top.png), url(bottom.png), 75%);
two background-images with cross-fade

Blending effects

The background-image property can also be used to specify things that are to be blended together to form a composite background, where the first image spec is highest in z-order. To do this, specify more than one rule, separating each one with a comma.

background-image: linear-gradient(red, transparent),
linear-gradient(to top left, lime, transparent),
linear-gradient(to top right, blue, transparent);
background-blend-mode: screen;
background-image with multiple images blended

style > background > background-imageMaking a splash

🔎