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-attachment
background-color
background-clip
background-image
background-origin
background-position
background-repeat
background-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-box
the default value. The background will extend to the outside edge of the element’s border. -
padding-box
clips the background at the edge of the element’s padding, without the border. -
content-box
clips the background at the edge of the content box, without the padding. -
inherit
applies 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)