Borders and backgrounds with CSS3 - HTML5 and CSS3 - page 364

smooth and sharp no matter how much you stretch them, whereas bit-
map graphics become blocky and blurry. Following are two examples,
one using a bitmap PNG format and the other SVG . The SVG image is
much sharper.

div {
background-image:
url('aj. png ');
background-repeat: no-repeat;
background-size: 50% 100%;
padding-left: 50%;
display: inline-block;
}

div {
background-image:
url('aj. svg ');
background-repeat: no-repeat;
background-size: 50% 100%;
padding-left: 50%;
display: inline-block;
}

Although SVG works well with background sizing, it's a bad fit for
photographic — type images. You may want to set a single picture
behind your content, similar to the effect achieved by setting a
desktop background on your computer. In this case, the detail of the
image isn't as important, so distortion is less of an issue.

This example shows the main content
with a semitransparent background over-
laid on a background image set to fill the
entire box. Here's the markup:

<section>
<div>
<p>In almost every...</p>