CSS Backgrounds
Adding backgrounds are easy ways to fill large pieces of screen space. There are numerous ways to modify backgrounds with properties like background-size
and background-origin
. We will cover almost all of the CSS properties we have to modify backgrounds with interactive widgets.
background-image
Using the CSS property background-image
, we can add an image using a url or even add a background gradient. Below, I have examples which use the url()
CSS function to get images and some gradients.
Background Image
.item {
background-image: url(http://i0.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg);
}
background-color
This lets us set the color of the background. This will not work if a background image covers the whole background.
Background Color
.item {
background-color: #194d33;
}
background-size
Using the background-size
CSS property lets you modify the size of the background. There are a multitude of ways to define background sizes.
The first way to define the size is with a single length value. This will define the the width of the background, The height of the background will be set to auto
which will fit the aspect ratio of your image.
Background Size
.item {
background-size: 10px;
}
Another way to define background size is with 2 length values. The 2 length values represent the width and height respectively.
Background Size
.item {
background-size: 10px 10px;
}
The contain
and cover
keywords can be used to automatically layout the background. contain
makes the background as large as it can without cropping or stretching the image. cover
fills the entire background onto the element and crops the background if needed.
Background Size
.item {
background-size: contain;
}
background-repeat
background-repeat
modifies how backgrounds will repeat. You can modify the repeat of both the x and y axis.
A few notable values are:
space
Attempts to place as many repeated backgrounds as possible without stretching or cropping any backgrounds. Any empty space is added between backgrounds.
round
Fairly hard to describe so instead I’ll quote from the MDN page on background-repeat.
As the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room (space left >= half of the image width) for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added. They will then compress to 225px.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#values
Background Repeat
.item {
background-repeat: repeat;
}
You can also apply background-repeat
with a 2 value syntax to specify the background repeat in the horizontal and vertical axis respectively.
Background Repeat
.item {
background-repeat: repeat repeat;
}
background-origin
This seldom useful CSS property is used to define the origin starting position of the background. This is useful if you want the origin of the background to start on the outside of the border or on the inside of the padding.
border-box
Positions the backgrounds origin on the border box.
padding-box
Positions the backgrounds origin on the padding box.
content-box
Positions the backgrounds origin on the content box.
Background Origin
.item {
background-origin: border-box;
}
background-clip
Similar to the background-origin
property but determines if the background itself will extend underneath its border, padding or content.
border-box
Extends the background under the border.
padding-box
Extends the background under the padding.
content-box
Extends the background under the content.
Background Clip
.item {
background-clip: border-box;
}
background-position
This sets the position of the background relative to the origin of the background defined by its background-origin
. There are numerous ways to set a backgrounds position. The easiest way is with keywords such as center
, top
, and left
.
Try playing around with the widgets below with a background-repeat
set to no-repeat
for extra fun.
Background Position
.item {
background-position: center;
}
We can also use a 2 value syntax to define the x position and the y position of the background. %
and px
values can be used.
Background Position
.item {
background-position: 0% 0%;
}
A 4 value syntax can be used as well. Specifying a value like background-position: right 40px top 20px
will position the background 40px
from the right and 20px
from the top edge of the background.
This works similarly to positioning elements using the CSS property position
and adjusting its position with values like top: 20px
or right: 40px
.
If the first position is right
or left
then the other value may not be right
or left
. If the first position is top
or bottom
then the other value may not be top
or bottom
.
Background Position
.item {
background-position: right 0px top 0px;
}
Conclusion
There is a lot of properties to modify backgrounds in CSS. I did not cover background-attachment
or the background
CSS property in this tutorial. Personally, I don’t recommend the use of background
since it’s fairly hard to read but here is a link to the MDN article on it anyways.