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
example).
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
size.
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
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