CSS background-size is used to set the background image size inside the block. CSS background image can be used to give the background of a block. A background size can be used when we want a mage to show in required size. This image can be any format like jpg, png etc. You should also see CSS background-attachment.
The syntax for CSS background-size is:
|
1 |
background-size: property value comes here; |
For Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>CSS background-size syntax</title> <style> .div-bg-size{ background-image:url(../../images/recycle1.png); min-height:200px; background-position:center center; background-repeat:no-repeat; backgroundsize:50px } </style> </head> <body> <div class="div-bg-size"> <p>This is the HTML paragraph inside the div for background size text. This div contains background image of globe. This background image has given position center and is not repeated for many times. The background center make it at the center position inside the block. Th background size given here.</p> </div> </body> </html> |
Output
This is the HTML paragraph inside the div for background size text. This div contains background image of globe. This background image has given position center and is not repeated for many times. The background center make it at the center position inside the block. Th background size given here.
CSS background-size values list
The values and description of this property is used to specify the background size of background image. You should also see CSS background-attachment.
| Sr. No. | value | Description |
|---|---|---|
| 1 | auto | Used to automatically determine the width and height of background image size inside block. |
| 2 | contain | Used to make background image to fit the block. |
| 3 | cover | Used to make background image to cover the whole block or background area. |
| 4 | length in px | Used to give background image width and height in pixel inside block. |
| 5 | length in percentage | Used to make background image width and height in percentage inside block. |
| 6 | initial | Used to define as the property initial value. |
| 7 | inherit | Used to define the computed value of property on the elements parent. |
CSS background-size cover
In this example we will use CSS background-size to cover the block.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>CSS background-size syntax</title> <style> .div-bg-cover{ background-image:url(../../images/recycle1.png); min-height:200px; background-position:20% 60%; background-repeat: no-repeat; background-size:cover; } </style> </head> <body> <div class="div-bg-cover"> <p>This is the HTML paragraph inside the div for background position text. This div contains background image of globe. This background image has given position given in percentage.</p> </div> </body> </html> |
Output
This is the HTML paragraph inside the div for background position text. This div contains background image of globe. This background image has given position given in percentage.