Backgrounds in CSS

The background image will scroll with the page. It will also position and resize itself according to the element it's applied to.

The background image will not scroll with the page, and remain positioned according to the viewport. It will also position and resize itself according to the viewport. As a result, the background image will probably only be partially visible.

The background extends completely throughout the element, even under the border.

The background only extends to the edge of the border: it includes the padding but not the border.

The background only extends to the edge of the content: it doesn't include the padding, nor the border.

By default, the background color is transparent, basically meaning that there is no background color.

You can use one of the 140+ color names.

You can use hexadecimal color codes.

You can use rgb() color codes:

• the first value is for red
• the second value is for green
• the third value is for blue

Each of them can have a value between 0 and 255.

You can use rgba() color codes:

• the first 3 values are for rgb
• the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

You can use hsl() color codes:

• the first value is for hue and can go from 0 to 359
• the second value is for saturation and go from 0% to 100%
• the third value is for luminosity and go from 0% to 100%

You can use hsl()a color codes:

• the first 3 values are for hsl
• the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

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 https://blog.poetries.top/css-reference/images/jt.png).

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 to bottom (or 180deg), which means the gradient is vertical, starting at the top, ending at the bottom of the element.

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 0deg means the the top of the element, like 12:00 on a clock.

In this example, 45deg means 2:30, or the top right corner.

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:

• closest-side
• closest-corner
• farthest-side
• farthest-corner

Like with the background-position, you can specify the position of the gradient.

The background image starts at the edge of the border: within padding but not the border.

The background image starts under the border.

The background image only starts at the edge of the content: it doesn't include the padding, nor the border.

The background image will be positioned at 0% on the horizontal axis and 0% on the vertical axis, which means the top left corner of the element.

You can use a combination of position keywords: center, top, bottom, left and right.

The background image will be positioned in the center of the element.

The background image will repeat itself both horizontally and vertically.

The background image will only repeat itself horizontally.

The background image will only repeat itself vertically.

The background image will only appear once.

The background image will retain its original size.

For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It's bigger than its container (which is 150px high) and will thus be clipped.

You can specify a size in pixels:

• the first value is the horizontal size
• the second is the vertical size

You can use percentage values as well. Beware that this can alter the aspect ratio of the background image, and lead to unexpected results.

The keyword contain will resize the background image to make sure it remains fully visible.

The keyword cover will resize the background image to make sure the element is fully covered.