Background Size Property is used to set the Size of the Background Image. If you Set the Background as the image for your web page, you must set the width and height for the Background Size for the Image.They are lost size value available the list and explanation given below.
- Auto: Default Value of the Background Image Size, width and height value must set at auto.
- Length : Its used to set the width and height of the background image background-size: 10px 10px;. First value set to be the width of the background image and second value set to the height of the background image.
- Percentage: You can set the Background image Size in the percentage. Like this 50%. You can set the whole image size in the single value also you must declare the background-size: 50% means its value must be 50% height and 50% width. You can also given the background image size in two values like this background-size:50% 50%; The first value must be the width and second value must be the height.
- Cover: This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
- Contain: This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
- Initial: Set the Property value Default.
- Inherit: Set the Property value what the declared by the parent value.
Example:
background-size:auto; background-size:50px 50px; //Lenght Background-size:50% 50%; //Percentage background-size:cover; //Cover Value background-size:contain; //Contai Value background-size:initial; // Initial background-size:inherit; //Inherit Value
