Every div element has a background-image on which we are applying the background-size property. In this example, there are three div elements with a width of 300px and a height of 200px. Let's understand this CSS property by using some illustrations. Inherit: It inherits the property from its parent element. Initial: It sets the property to its default value. It resizes the image to ensure the element is completely covered.Ĭontain: Without stretching or cropping, it resizes the background image to ensure the image is completely visible. Sometimes, it crops the little bit off one of the edges or stretches the image. Negative values are not allowed.Ĭover: This value is used to resize the background image to cover the entire container. Percentage: This value defines the width and height of the background image to the percentage (%) of the background positioning area. If two values are given, the first value sets the width, and the second value sets the height. Its single value specifies the width of the image, and the height sets to auto. This value stretches the image in the corresponding dimension of the given length. Length: It is used to set the width and height of the background image. Property ValuesĪuto: This is the default value, which displays the background image in its original size. The values of this property are defined as follows. Syntaxīackground-size: auto | length | cover | contain | initial | inherit In contrast, the contain value of this property scales the image as much as possible without clipping the image. The cover value of the background-size property is used to cover the entire background area of the element. If an element has multiple background images, we can define the comma-separated values to define the different sizes of each one. Its single-value syntax defines the width of the image (in this case, the height sets to auto), whereas the double values define the value of both height and width in which the first value sets the width and second sets the height. It has two possible keyword values that are contain and cover. This property can be defined using length, percentage, or keyword values. It allows us to control the scaling of the background image. The background image can be stretched or constrained to fit into the existing space. The background-size CSS property is used to set the size of a background image of an element. īut what if we don’t know the aspect ratio of the image and we get a square cat picture? Won’t our cat be squished? Yes, yes it would, poor cat.Next → ← prev CSS background-size property This is bad news for your page performance.īest to set the intended size so the browser can reserve space. This will most likely cause the browser to render the page twice, because after the height of the image is updated all items below the image are pushed down. The browser will render the page, wait for the image source to load, and then update the height of the image element. If we want it to show a bit smaller we can set the width to 240, the browser will then automatically calculate the height to be 180. Imagine we have a cat picture with an aspect ratio of 4:3, in other words, it’s dimensions are 4032 × 3024, that’s a lot of cat. Our first choice is to set only one size property, either width or height, the browser will automatically calculate the size of the other edge. Let’s look at the different options we have to size images while keeping their aspect ratio in check. We can resize images proportionally with HTML image tags or CSS background styles. Sometimes images are just too big to display on the web page.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |