CSS: Background Properties
CSS provides a wide range of methods to style background. You can set one or more images to the background of a single element, tile the whole background with one small icon, apply your own gradients or after all, just assign a solid color.
By default, the background is transparent. To set a new color for the background
background-color property. It takes a value of color of any listed
format: keywords, hexadecimal, RGB, RGBA, HSL, HSLA.
If you want to declare an image to the element’s background, you should use the
background-image property. The syntax is straightforward:
It’s considered the good practice to specify the solid color as a fallback in a
case when the image cannot be loaded.
Usually, background fills out the whole background area including its padding
and border (e.g. dotted or dashed borders) space. You can control this behavior
by setting one of the 4 possible values of the
padding-boxmake background to extend to the outside edge of the padding area, not including borders;
content-boxextends to the inside edge of the padding area, neither padding area nor borders are included;
textis an experimental value. It enables background to fill out only the foreground text.
When an image is less than an element’s background space, the element will be placed in the left upper corner. This is an initial position that can be changed via background-position property. It takes various values – keywords, percentages, length and can be set by 1-4 values. Often only two values are used when the first value represents the horizontal position (x-axis) and the second (y-axis) represents the vertical position. If only one value is set, the second one is assumed to be center.
If you want to tile a background image, take a closer look at the
background-repeat property. At its base, it’s only four values:
repeat– tile the whole background with a given image;
no-repeat– no tilling at all;
space– the first and the last images are pinned to each side of the element and the rest of whitespace is evenly divided between the images;
round– the images repeat in both directions so there is no whitespace. The images stretch to prevent empty space.
Origin image’s placement calculated with respect to the outer edge of the padding area of the element. This is the default behavior. You can affect this using the background-origin property. It has the following values:
padding-boxis the initial property value. It places background relative to the padding box;
border-boxplaces background relative to the border box;
content-boxpositions background relative to the content box.
background-size lets you define the size of the origin image. It can take
keywords, length, and percentages as its values. There are only two predefined
coverscales an image as much as possible to cover the whole background;
containpastes an image to the block without filling out whitespace.
Also you can set the property to any CSS size unit value.
Using the property background-attachment enables the origin image to be fixed with respect to the viewport. This rewards your background with immunity to the effects of scrolling. There are only 3 values:
scrollis the default value. The origin image is fixed to the element’s box itself and it scrolls with the content;
fixed– the origin image does not scroll along with the document;
local– the background is fixed according to the behavior of the element. If the element has scrolling, the background will scroll with the content, but the background that goes beyond the element remains in its place.
This property lets you define how exactly
background-image of an element
blends with its
background-color or other background images. It can have one
of 15 possible values. You can declare its own blend mode on every layer of the
background (image and/or color). It’s a really powerful tool if it’s properly
used. For example, you can create Instagram-like filters with combining
background image and right gradients:
A shorthand property for all
Order can be any, but specification recommends the order mentioned above. Omitted sub-values are set to their initial values.