Setting the Background Image Size
Description
We use the background-size property to resize the image.
In addition to lengths, you can specify percentages which are derived from the width and height of the image, and some predefined values which is listed as follows.
- contain - Scales the image, preserving the aspect ratio, to the largest size that can fit inside the display area.
- cover - Scales the image, preserving the aspect ratio, to the smallest size that can fit inside the display area.
- auto - This is the default value. The image will be displayed at full size.
Example
The following code shows the effect of cover.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!-- w ww. j av a2 s.c om-->
background-image: url(http://www.java2s.com/style/download.png);
background-size: cover;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
</p>
</body>
</html>