background-image

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

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

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

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

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);
							

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:

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);
							

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);
							

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%);
							

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%);
							

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;