CSS Backgrounds

background-color Property

Property	Usage and Effect	Values Accepted	Recommendations
background-color	Used to change the background color behind text and potentially behind an entire region of the page, if applied to a block-level tag. Applying this to `body` changes the background color for the entire browser window.	A pre-defined color name Hexadecimal value (e.g., `#fff`) RGB value: `rgb(255, 0, 0)` or `rgb(0%, 50%, 25%)` HSL value: `hsl(0, 100%, 50%)` `transparent` (this is the default)	The same result can be achieved more efficiently with the `background` shorthand property, so that is preferred. Typically you should pair a background color with a text color, if that area of the layout is expected to contain text content. Or you can rely on color inheritance from `body`.

background-color Example

See the Pen background-color by Jason Withrow (@jwithrow) on CodePen.

background-image Property

Property	Usage and Effect	Values Accepted	Recommendations
background-image	Used to insert an image as a background for an element (or for the entire browser window, if applied to `body`). Background images have no effect on the height/width of the element they are applied to, so users will only see as much of the background image as the element's height and width allow.	The filename / file path to the image. Can be either an absolute or relative path (if relative, the path is based on where the file with the CSS is located).	Only make backgrounds of non-essential images, because CSS support could be altered or disabled and then the image would not be there. Background images will not print by default. Essential images should be coded into the document via the `<img />` element.

background-image Example

See the Pen background-image by Jason Withrow (@jwithrow) on CodePen.

The smile.png background image is:
Smile

background-repeat Property

Property	Usage and Effect	Values Accepted	Recommendations
background-repeat	Instructs a background image whether it should tile/repeat and, if so, in what direction (x-axis which is horizontal or y-axis which is vertical).	`repeat` (the default) `no-repeat` `repeat-x` `repeat-y`	For many background images you will want to instruct them to `no-repeat`, if nothing else, in order to prevent them from appearing multiple times should the element that they are applied to become larger.

no-repeat Example

See the Pen background-repeat by Jason Withrow (@jwithrow) on CodePen.

repeat-x Example

See the Pen background-repeat: repeat-x by Jason Withrow (@jwithrow) on CodePen.

repeat-y Example

See the Pen background-repeat: repeat-y by Jason Withrow (@jwithrow) on CodePen.

background-position Property

Property	Usage and Effect	Values Accepted	Recommendations
background-position	Used to place the background image within the specified element (or within the browser window, if applied to `body`).	Keyword Values: `top` \| `center` \| `bottom` `left` \| `center` \| `right` (if you omit the second value, it defaults to `center`) Percentage Values: x% y% (Horizontal position, followed by vertical position. Top left is 0% 0%; bottom right is 100% 100%. If only one value is given, the other is set to 50%) Pixel / Other Sizing Unit Values: x[unit] y[unit] (Horizontal position, followed by vertical position. Top left is 0 0 (or 0px 0px). If only one value is given, the other value is 50% It is fine to mix percentages and pixels.	If applying the background image to `body` then for cross-browser compatibility set `html` to a height of 100% to render the background in the correct place.

background-attachment Property

Property	Usage and Effect	Values Accepted	Recommendations
background-attachment	Determines whether a background image scrolls with the document or remains stationary.	`scroll` (the default) `fixed`	Watch out for the image intersecting with text and compromising the text's readability.

background-attachment Example

See the Pen background-attachment by Jason Withrow (@jwithrow) on CodePen.

Be sure to scroll the rendered output to see the background image remain in the same place relative to the window.

background-size Property

Property	Usage and Effect	Values Accepted	Recommendations
background-size	Sets the dimensions of the background image.	Number and unit (e.g., px, em, %) `auto` `cover` (scales the image to fill the element; some of the background image may not be in view if it is larger than the height/width of the element) `contain` (scale the image to the largest size that fits its height and width within the element) If numbers are used: If one value is given, it is used for height and width. If two values are given they are separated by a space; the first value is width and the second value is height. Percentages work for block-level elements (or elements displayed as block or inline-block) and are relative to the area within the element defined by the `background-origin` property. The `auto` value uses the image's intrinsic value (its actual dimensions), either as `auto`, `auto auto`, or with a specified height or width as the other value. Negative values are not allowed and `0` should result in the image not being shown.	Most of the time this is set to `cover`, because usually you want the background image filling the entire element. Raster images (jpg, gif, png, webp, etc.) will have some distortion if they are stretched from smaller to larger sizes, as the rendering is guessing at the pixel values.

background Shorthand Property

Property	Usage and Effect	Values Accepted	Recommendations
background	Combines the other background-related properties into one sequence.	Sequence of Values: background-color background-image background-repeat background-attachment background-position/background-size Additional Notes: Not all values need to be supplied (I will often just specify the background-color value); values omitted revert to defaults. To avoid cross-browser issues, follow the value sequencing shown. Values are separated by a single space, with the exception of `background-position` and `background-size` being separated by a `/` character.	Highly recommended and should be used instead of `background-color`. Makes code more efficient and also sets all properties not listed to their defaults (so be aware that you might be overriding some other non-default styling for the element elsewhere in your CSS with a default). The upside is that falling back to a default eliminates concerns about user settings or browser settings that might negatively impact rendering. Pair a background color with a text color in cases where there is no higher-level text color being inherited and text content will be involved.

background Shorthand Example

See the Pen background shorthand by Jason Withrow (@jwithrow) on CodePen.

Multiple Background Images on an Element

If the background shorthand is used, commas separate each block of shorthand code.
If the individual (non-shorthand) properties are used, then the background-image urls are separated by commas and the background-position values are also separated by commas, and so on through all the various individual background-related properties.
The browser matches the url to its position based on the sequence of values.

background-origin and background-clip Properties

Property	Usage and Effect	Values Accepted
background-origin	Determines the reference point for the `background-position` placement.	`padding-box` (the default; position is relative to the upper left padding box edge) `border-box` (position is relative to the upper left border box edge) `content-box` (position is relative to the upper left corner of the content box)
background-clip	Determines whether a background extends into the border box.	`border-box` (the default; the background is clipped to the border box) `padding-box` (the background is clipped to the padding box) `content-box` (the background is clipped to the content box)

background-origin, background-clip, and background-size Example

See the Pen background-origin, background-cip, and background-size by Jason Withrow (@jwithrow) on CodePen.