HTML and CSS Reference
In-Depth Information
7. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
8. padding: 15px 20px 15px 50px;
9. }
Exploring New Background Properties
Along with gradient backgrounds and multiple background images, CSS3 also introduced
three new CSS properties: background-size , background-clip , and
background-origin . The background-size property allows us to change the size
of a background image, while the background-clip and background-origin
properties allow us to control where a background image is cropped and where a back-
ground image is contained within the element (inside the border or inside the padding, for
CSS3 Background Size
The background-size property allows us to specify a size for a background image.
The property accepts a few different values, including length and keyword values.
When using length values, we can specify a width and a height value by using two space-
separated values. The first value will set the width of the background image, while the
second value will set the height of the background image. It's important to note that per-
centage values are in relation to the element's size, not the background image's original
Consequently, setting a background-size property with a 100% width will make the
background image occupy the full width of the element. If a second value isn't identified
after the width, the height value will be automatically set to preserve the aspect ratio of the
background image.
The keyword value auto may be used as either the width or height value to preserve the
aspect ratio of the background image. For example, if we want to set the height of the back-
ground image to be 75% of the height of the element while maintaining the image's aspect
ratio, we can use a background-size property value of auto 75% (see Figure 7.12 ) .
Click here to view code image
1. div {
2. background: url("shay.jpg") 0 0 no-repeat;
3. background-size: auto 75%;
4. border: 1px dashed #949599;
5. height: 240px;
6. width: 200px;
7. }
Search WWH ::

Custom Search