---
layout: single
property_name: background-image
---
Defines an image as the background of the element.
Removes any background image.
Uses the image defined in the url path. This path can either be relative (to the css file) or absolute (like
You can define a linear gradient as the background image. You need to define at least two colors. The first one will start at the top, the second one at the bottom. The default angle is
You can specify an angle, either in degrees, or with keywords. When using degress, you specify the direction of the gradient, or when it ends. So In this example,
You can define a radial gradient as the background image. You need to define at least two colors. The first one will be at the center, the second one at the edges.
You can specify the shape of the radial gradient: circle or ellipse (default).
You can specify color stops using percentage values.
You can specify where the gradient should end:
Like with the
#background-image
默认属性
background-image: none;
background-image: url(/images/jt.png);
http://cssreference.parryqiu.com/images/jt.png).background-image: linear-gradient(red, blue);
to bottom (or 180deg), which means the gradient is vertical, starting at the top, ending at the bottom of the element.background-image: linear-gradient(45deg, red, blue);
0deg means the the top of the element, like 12:00 on a clock.45deg means 2:30, or the top right corner.background-image: radial-gradient(green, purple);
background-image: radial-gradient(circle, green, purple);
background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);
background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);
closest-sideclosest-cornerfarthest-sidefarthest-cornerbackground-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);
background-position, you can specify the position of the gradient.