HTML and CSS Reference
In-Depth Information
</div>
</section>
And here's the
CSS
:
section {
margin: 1em;
padding: 5%;
outline: 4px dashed black;
background: url('10years.jpg') top /
100% no-repeat;
display: inline-block;
min-height: 342px;
min-width: 300px;
}
div {
background-color:
rgba(255,255,255,0.66);
}
Unlike the previous examples, it uses
the shorthand syntax. The size appears
with the position separated by a
slash:
top
/
100%
.
Note that although several browsers have implemented
background-size
,
only Opera has implemented the shorthand syntax. For other browsers,
you'll have to stick with a separate
background-size
declaration.
Scaling isn't the only new background feature
added in CSS3. You can also attach multiple
backgrounds to a single element. In the previous
example, an element was added to the markup whose
only role was to add a background to the text. In
the next section, you'll see how CSS3 allows you
to do this without additional markup for styling.
Multiple backgrounds
In
CSS2
, you're only allowed one background image per element, but
there are many situations in which you might want more than one
image:
A header has a background image spanning the width of the page as
well as a company logo.
❂
