Set the size of background image using CSS ?
The background-size property is used to set the background image size using CSS. Use height and width property to set the size of the background image.
Syntax:
background-size: width height;
Note:
- If the first value is omitted then the image takes its original width.
- If the second value is omitted then the image takes its original height.
Example 1: This example sets the background-size into width and height.
<!DOCTYPE html> <html> <head> <title> Set the size of background image </title> <style> #myDiv { height: 200px; width: 400px; background: background-size: 400px 200px; } </style> </head> <body> <div id= "myDiv"></div> </body> </html> |
Output:
Example 2: This example sets the background-size into percentage.
<!DOCTYPE html> <html> <head> <title> Set the size of background image </title> <style> #myDiv { height: 200px; width: 400px; background: /* Set the background-size in percentage */ background-size: 70%; background-repeat: no-repeat; } </style> </head> <body> <div id= "myDiv"></div> </body> </html> |
Output:
Please Login to comment...