I recently started learning about creating amazing CSS backgrounds and gradients in the online software developer bootcamp that I'm doing through AltCampus.
The background shorthand property can be a little tricky for us newbies though!
So let's get into it...
CSS Background Properties
The background longhand syntax in CSS is relatively straight-forward:
div {
background-color: red;
background-image: url("dress.jpg");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
We can also add a gradient:
/*Linear Gradient*/
div {
background-image: linear-gradient(to top, #e1fff6, #aca0a0);
}
/*Radial Gradient*/
div {
background-image: radial-gradient(#e1fff6 75%, #aca0a0 25%);
}
Or we can even add multiple images:
div {
background-image: url("cat.jpg"), url("dog.jpg"),
url("hamster.jpg");
}
/*Note: If the images are the same size, you will only see
the cat image in the above example, as the others
will fall behind it.*/
But where things may get a little confusing is the background shorthand property.
The CSS Background Shorthand Property
The background shorthand property combines the longhand properties above into one.
These properties are:
div {
background-image: url("cat.jpg");
background-position: top left;
background-size: contain;
background-repeat: repeat y;
background-attachment: fixed;
background-origin: padding-box;
background-clip: border-box;
background-color: #e1fff6;
}
Using the background property, the above becomes:
/*div {
background: bg-image bg-position/bg-size
bg-repeat bg-attachment bg-origin bg-clip bg-color;
}*/
div {
background: url("cat.jpg") top left/contain repeat y fixed
padding-box border-box #e1fff6;
}
/*OR*/
div {
background:
url("cat.jpg")
top left/contain
repeat y
fixed
padding-box
border-box
#e1fff6;
}
Pretty cool, huh?
Let's do a QnA to clear up some common questions about it.
Do we need to use all of these values every time?
No, but you'll need at least one value.
If you don't declare the other values though, then the default values will be used (or their values will be inherited from previous style rules).
Here are the default values:
div {
background-image: none;
background-position: 0% 0%; /*or top left;*/
background-size: auto;
background-repeat: repeat;
background-attachment: scroll;
background-origin: padding-box;
background-clip: border-box;
background-color: transparent;
}
Does the order matter?
Not in most cases, but the order above is recommended - and there are some exceptions:
ONE
background-origin and background-clip can have the same values (e.g. padding-box), so it's best to declare them in the right order.
NOTE: If there is only one value, that value will be used for both.
TWO
For the background-position property:
If numerical values are used, then the first one is for the
horizontal position and the second one is for the vertical
position. You cannot say top bottom or left right.
But the order of the two values doesn't matter if keywords
are used (e.g.top right or right top are both fine). Both need to be keywords though - 20% bottom is not the same as bottom 20%.
NOTE: These values always need to go next to each other.
THREE
If you are using multiple background images you can only set a color for the final image - and it should be last. If you set a color for all the images, it will be ignored by the browser.
FOUR
background-size must be declared after the background-position.
And, the correct way to do this is to use a slash (/) between them, like this:
div {
background: url("house.jpg") 50% 50%/contain no-repeat;
}
Can I use multiple background properties for one element?
Yes. You just need to seperate them with a comma, like this:
div {
background: url("cat.jpg") 20px 20px/100px 150px no-repeat,
url("dog.jpg") top left/100px 150px no-repeat;
}
Things to keep in mind:
If you're using a background image, it's always good to declare a background color. This is in case of slow image loading times.
Also, try to use a background color where the text (if any) is readable if the background image is slow to load.
In order to condense your code, try to declare infrequent
background properties separately (such as
background-attachment, background-origin).
PS Gradient Websites
As a side note if you're struggling with writing gradient CSS, these are so helpful:
Gradient Maker at cssgradient.io
Gradient Animator at gradient-animator.com
Happy Coding! :)
Test your skills!
Are these correct? Why?
Comment below!
1) background: #e1fff6 url("house.jpg");
2) background: url("house.jpg") top left 20px 20px;
3) background: url("house.jpg"); 50% 50%; 30px 30px;
4) background: #e1fff6 no-repeat bottom top;
5) background: 50% 50%/contain no-repeat;