A background color can be added to almost any html element using the
background-color property followed by a valid color definition (see the CSS Color Definitions guide).
Background colors sit behind any text, images, or other content and extend to the bounds of the element, including any padding applied.
In the demo above, try changing the background color using other named colors, hexadecimal colors, or rgb colors.
A background image can be applied with the
background-image property and a reference to the image path.
By default, a background image:
- Repeats on both the x and y axes.
- Is top-left aligned to the element.
- Is sized the actual scale of the image file.
In the demo above, try replacing the image url with another image you find on the internet. Pay attention to how the size of the image affects its behavior. What happens when you use a really small image? What about a really large one?
By default, background images repeat in both directions if they aren't large enough to fill all the available space. The
background-repeat property can specify for a background image to repeat only in one direction or the other, or to not repeat at all.
Notice in the previous examples that by default a background image is positioned in the top-left of the element to which it is applied. This can be changed using the
background-position property. It will accept two values: an x-axis position and a y-axis position.
The simplest way to provide values for
background-position is to use the available keywords:
center. Each behaves as you would expect.
In the example above, try changing the values for the
background-position property. What happens when you use
center for the first value? What happens when you use
top for the second value? What if you only provide one value?
You can also specify specific values using any appropriate CSS measurement unit. Positions are measured from the left and top.
In the example above, try out different measurement values for the
background-position property. Play with different unit types and different numbers.
By default, a background image moves with the element to which it is applied. If the page is scrolled and the top of the element is repositioned, so too is the top of the background image. This behavior can be changed with the
background-attachment property. Combined with a value of
fixed, the background image stays anchored in place as the element slides away, allowing for parallax-style effects.
By default, a background image is scaled to match the actual pixel dimensions of the image file. However, this can be changed in a number of ways using the
There are a number of named keywords for scaling background images.
contain scales an image so that the entire image is visible within the element.
cover scales an image so that the entire element is always covered.
Numerical Size Measurements
background-size property can also be used with any appropriate numerical size measurement. The values are read width then height.
Be careful when using numerical size values. They can cause an image to be stretched if improperly applied, like in the example below.
The following video demo is fully interactive. You can pause at any time to directly edit the code, and resume playback to restore to where you left off.