How to stretch and scale background image using CSS?
The background-size property is used to stretch and scale background image. This property set the size of background image. Here we will see all possible examples of background-size and background-scale property.
Syntax:
background-size: auto|length|cover|contain|initial|inherit;
cover: This property value is used to stretch the background-image in x and y direction and cover the whole area.
length: This property value is used to scale the background-image. It change the background-image size. The length value can be in form of px, em, % etc.
Example 1: This example stretches the background-image in x and y direction.
<!DOCTYPE html><html> <head> <style> /*background-size: 100% auto with no repeat */ #example1 { width:600px; /* screen width */ height:200px; /* screen height */ border: 2px solid black; background: url( background-repeat: no-repeat; background-size: 100% auto; } /*background-size:auto with no repeat*/ #example2 { width:600px; /* screen width */ height:200px; /* screen height */ border: 2px solid black; background: url( background-repeat: no-repeat; background-size: auto; } /* background-size: cover with no repeat */ #example3 { border: 2px solid black; width:600px; /* screen width */ height:200px; /* screen height */ background: url( background-repeat: no-repeat; background-size: cover; } </style> </head> <body> <h2>background-size: 100% auto :</h2> <p> The background image is displayed in its original size. </p> <div id="example1"></div> <h2>background-size: auto (default):</h2> <p>The background image is set to auto.</p> <div id="example2"></div> <h2>background-size: cover:</h2> <p> The background image is set to cover to specified area. </p> <div id="example3"></div> </body></html> |
Output:
Example 2: This example scales the background-image.
<!DOCTYPE html><html> <head> <style> /*background-size: initial with no repeat */ #example1 { width:600px;/* screen width */ height:200px;/* screen height */ border: 2px solid black; background: url( background-repeat: no-repeat; background-size: initial; } /*background-size: contain with repeat */ #example2 { border: 2px solid black; width:600px;/* screen width */ height:200px;/* screen height */ background: url( background-size: contain; } /*background-size: 300px 100px with no repeat */ #example3 { border: 2px solid black; width:600px;/* screen width */ height:200px;/* screen height */ background: url( background-repeat: no-repeat; background-size: 300px 100px; } </style> </head> <body> <h2>background-size: initial:</h2> <p>The background image is set to initial.</p> <div id="example1"></div> <h2>background-size: contain:</h2> <p>The background image is set to contain.</p> <div id="example2"></div> <h2>background-size: 300px 100px:</h2> <p>The background image is set in pixel size.</p> <div id="example3"></div> </body></html> |
Output:
Please Login to comment...