Loading Please Wait...
CSS background-size property is used set the size of the background image of an element.
The background-size property can have following values:
contain: scale the image as large as possible within the the container without cropping and stretching. If container is larger then this will results in image tiling.
cover: background image is scaled to the smallest possible size to cover the container without leaving any space. If image proportion do not match container the image is either cropped or stretched.
auto: background image is scaled in respected direction and also maintain the image proportion (aspect ratio) as well.
percentage: sets background image size to the percentage value give.
length: sets background image size to the length value given.
inherit: inherit from parent.
initial: initial as browser default.
revert: same as it would be if no changes were made.
revert-layer: same as back to the previous value.
unset: same as parent (like inherit) and if not inherited then back to browser default (like initial).
background-size: cover;
background-size: cover contain;
If only one value (width) is defined then the second value (height) becomes auto.
/* Keyword values */
background-size: cover;
background-size: contain;
/* 1-value syntax (width and height is auto) */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
/* 2-value syntax (width and height) */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
/* Global values */
background-size: inherit;
background-size: initial;
background-size: revert;
background-size: revert-layer;
background-size: unset;
We can also define multiple background size with multiple background images.
background-image: url("image1.png"), url("image2.png");
background-size: cover, auto;
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved