In this tutorial, we’ll learn how to change the backgrounds of CSS elements.
The background property allows you to control the background of any element. It’s a shorthand property, so we can write multiple properties in one code block. For example:
body {
background:
fixed /* attachment *
blue; /* color */
content-box /* clip */
url(background.jpg) /* image */
padding-box /* origin */
top center 300px 300px /* position & size */
no-repeat /* repeat */
}
This example contains each of different properties that we can apply to backgrounds. Let’s take a look at these now..
Background properties
The background of an element can be changed using each of these properties:
background-attachmentbackground-colorbackground-clipbackground-imagebackground-originbackground-positionbackground-repeatbackground-size
background-attachment
Using background-attachment we can define how the background moves relative to the viewport (the part of the website, which is visible in the browser window).
We can use any of three values: scroll, fixed, and local.
scroll is the default behavior. The background will scroll with the page.
fixed attaches the background to the viewport, so that scrolling will not affect the background:
This is often used to achieve parallax effects.
local is new to CSS3, it causes an element’s background to be fixed to the element itself. This resolves unexpected behavior when working with backgrounds inside of scroll box on a page.
Background-color
The background-color property is quite self-explanatory. It changes our background color by accepting a color value, it can be a color keyword, an rgb or hsl value:
Check out my post to learn about working with colors.
Background-clip
We can use background-clip to create some neat effects. It lets you choose the area used by the background. The values we can use are:
-
border-boxthe default value. The background will extend to the outside edge of the element’s border. -
padding-boxclips the background at the edge of the element’s padding, without the border. -
content-boxclips the background at the edge of the content box, without the padding. -
inheritapplies the background-clip value of the parent to the element.
Background-image
The background-image property applies a graphic to the background of an element.
We specify the our image location using URL, like so:
We can use a relative path (as above) or a full web address if located externally.
Background-origin
With background-origin we can choose where to apply the background. It’s very similar to background-clip except it resizes the background instead clipping it.
By default our background to is applied to the entire element (including padding) with padding-box. We could also set our background to the entire element including the border with border-box, or to the element without padding using content-box.
We’ll often use background-size: cover and background-repeat: no-repeat with this property. To prevent a background image from repeating under any borders or padding. More on these later.
Background-position
When using a background image you’ll most often need to set it’s position. For this we use the background-position property. With this we can set the background image to the position specified within its container.
We can set the values using the keywords of left, right & center for the X (horizontal) axis, and top or bottom for the Y (vertical) axis:
The default values are 0 0. This puts your background image at the top left of the container.
To be more specific with our positioning, we could instead use length values:
Here the first value is the horizontal position, second value is the vertical position. So 100px 50px will move the image 100px to the right and 50px down. The values can be set in px, em, or any other valid CSS length value.
We can also use percentages:
Moving a background image by percentage means the X% point in the image will align to the X% point in the container. So 50% will align the middle of the image with the middle of the container. 100% will align the last pixel of the image with the last pixel of the container.
Background-repeat
When using an image that is smaller than the background, you can set its behavior with background-repeat, like so:
The possible values for this property are:
-
repeat: repeat the image in both directions (this is the default!). -
repeat-x: repeat the image horizontally. -
repeat-y: repeat the image vertically. -
no-repeat: don’t repeat the image, just show it once. -
space: repeats the image in both directions, spacing them out evenly. -
round: repeats the image in both directions, stretching them to fill any available space.
We could also apply differing values to our axis’ in one line:
The first value being our horizontal axis, the second our vertical.
Background-size
The last background property is background-size, and its perhaps one of the most useful! We can use 3 keywords: auto, cover and contain with auto being the default.
auto the browser automatically calculates the size based on the actual size of the image, preserving its aspect ratio.
cover expands the image to cover the entire element. If the element stretches, the image will crop a bit off at one of the edges to fit.
contain stops expanding the background image when one axis (x or y) covers the smallest edge of the image, which makes it fully contained within the element. Essentially, the whole image will always be shown, meaning there might be some space at the sides or bottom.
Additionally can specify a length value, which sets the width of the background image (the height will be automatic):
If you specify a second value, the first is the width and the second the height:
Note: Any CSS size unit can be used, including px, %’s, ems, vh, vw, etc.
Multiple Background Images
You can also combine any of the above methods and apply them to multiple images, simply by adding commas between each:
In this example, our first image is set to 500x100 pixels, it sits above our second image which covers the entire area.
When using multiple images for the background, it's important to remember the stacking order. Each value corresponds to a layer: the first is the top layer, the second is the second layer, and so on. If a background color is set, it’ll always be the last layer.
Summary
And that’s it! We’ve examined each of the background properties that we can work with in CSS. With this knowledge you can create some very unique layouts & unleash your inner creativity!
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
If you enjoyed this article & would like to leave a tip — click here
Top comments (0)