Foundation HTML5 with CSS3

(Steven Felgate) #1
Chapter 5

Figure 5-28. Non-percentage lengths position the top-left corner of the background image at the precise point specified
in your CSS. This example shows the result of background-position: 300px 8em;.

Shorthand for Backgrounds

Instead of writing out each background property separately, you can declare them all in one place with the
shorthand background property, to reduce the size of your CSS file and spare your carpal tendons from
the extra typing:
.intro {
background: #e6f2f9 url(images/background.png) 94% 20px no-repeat;
}
The order of the values doesn’t matter, with the exception of background-position; horizontal must still
come before vertical, and nothing else can appear between the two. Any properties not declared simply fall
back to their default value. For example, this rule only includes values for background-repeat and
background-image because that’s all we need to create a repeating stripe pattern:
#sidebar {
background: repeat-y url(images/stripes.gif);
}
All the other, undeclared background properties remain in their default states—background-color
defaults to transparent (no color) and background-position defaults to the top left. However, if you have
different rules declaring different values for the same element, and both use the shorthand background
property, the later declaration can override the earlier one, resetting undeclared values back to their
defaults. For example:
.intro {
background: #e6f2f9 url(images/background.png) 94% 20px no-repeat;
}

.intro {
background: left bottom;
}
Free download pdf