Background Colors & Images
Whether a simple color, a repeating pattern, or a large heroic image, CSS allows you to set custom backgrounds behind any HTML content and offers a great deal of customization options.
Background Color
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.
Background Image
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?
Background Repeat
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.
repeat-x
repeat-y
no-repeat
Background Position
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.
Keywords
The simplest way to provide values for background-position is to use the available keywords: left, right, top, bottom, or 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 left or center for the first value? What happens when you use bottom or top for the second value? What if you only provide one value?
Measurements
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.
Background Attachment
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.
Background Size
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 background-size property.
Keywords
There are a number of named keywords for scaling background images.
contain
contain scales an image so that the entire image is visible within the element.
cover
cover scales an image so that the entire element is always covered.
Numerical Size Measurements
The 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.
Video Lesson
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.