background-size
background-size
You can specify percentages and pre-defined values for background-image size. The size is then derived from the width and height of the image.
The background-size Values:
| Value | Description |
|---|---|
| contain | Scales the image, preserving the aspect ratio, to the largest size that can fit. |
| cover | Scales the image, preserving the aspect ratio, to the smallest size that can fit. |
| auto | Display the image at full size(default). |
Set background image size to contain:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p { <!--from ww w . j a v a2 s. c o m-->
background-image: url(http://java2s.com/Book/HTML-CSSImages/star.png);
background-repeat: repeat-x;
background-size:contain;
}
</style>
</head>
<body>
<p>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
</body>
</html>
The code above generates the following result.
background image to cover
Set background image size to cover:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p { <!-- ww w. j ava 2 s . c o m-->
background-image: url(http://java2s.com/Book/HTML-CSSImages/star.png);
background-repeat: repeat-x;
background-size:cover;
}
</style>
</head>
<body>
<p>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
</body>
</html>
The code above generates the following result.
