If your image is smaller than the box, you can change the value of background-repeat to repeat the image.Remove the length units and see what happens when you use background-size: cover or background-size: contain.Change the length units used to modify the size of the background.You can see this has distorted the image. In the example below I have used the balloons.jpg image along with length units to size it inside the box. In this case, you may end up with gaps on either side or on the top and bottom of the image, if the aspect ratio of the image is different from that of the box. contain - the browser will make the image the right size to fit inside the box.In this case, part of the image is likely to end up outside the box. cover - the browser will make the image just large enough so that it completely covers the box area while still retaining its aspect ratio.In this case we could use the background-size property, which can take length or percentage values, to size the image to fit inside the background. The balloons.jpg image used in the initial background images example, is a large image that was cropped due to being larger than the element it is a background of. Try out the different values - repeat-x and repeat-y - to see what their effects are. We have set the value to no-repeat so you will only see one star. Try these values out in the example below. repeat - the default repeat in both directions.no-repeat - stop the background from repeating altogether.The background-repeat property is used to control the tiling behavior of images. Try adding a background-color property to the example above to see that in action. If you specify a background color in addition to a background image then the image displays on top of the color. By default, the large image is not scaled down to fit the box, so we only see a small corner of it, whereas the small image is tiled to fill the box. This example demonstrates two things about background images. In the example below, we have two boxes - one has a background image which is larger than the box ( balloons.jpg), the other has a small image of a single star ( star.png).
The background-image property enables the display of an image in the background of an element.
0 kommentar(er)
