The latter 2 are intended to be used in a standalone fashion without another parameter. As a result, empty space can remain that will cause the image to repeat, unless background-repeat is set to no-repeat. contain: Sizes the image to fill the space without stretching or cropping.This may mean the image is stretched or cropped. cover: Covers the entire area of the background layer.

This is the default behavior of the background-size property. auto: When used independently, the background image is sized based on its intrinsic width and height when auto is used alongside another CSS value for the width (first parameter) or height (second parameter), the dimension set to auto is sized as needed to maintain the natural aspect ratio of the image.The background-size property accepts the following keywords: The property accepts up to two parameters corresponding to allowing you to change width and height of a background independently. The background-size property uses CSS length and percentage values or specific keywords. The background-size property sets the size of background images By default background images are sized based on their intrinsic (actual) width, height, and aspect ratio. The following demo demonstrates these capabilities of the background-repeat property: The value repeat-x repeats an image only horizontally this is equivalent to repeat no-repeat. The shorthand also has convenient one-word options to make your intent clearer. If you use a single value, it will be applied to both the horizontal and vertical repeats. The first parameter sets the horizontal repeat behavior, and the second parameter sets the vertical repeat behavior. The background-repeat property allows you to set the behavior for the x and y axis independently. Repeating images touch the edges of the space a background layer occupies, with white space evenly distributed between them.

space: The image repeats horizontally and vertically to fit as many instances within the space available without cropping-spacing out instances of the image as needed.

As the space available increases the image stretches, and after stretching half of the image's original width, compresses in order to add more image instances.

round: The image repeats horizontally and vertically to fit as many instances into the space available.

repeat: The image repeats within the space available, cropping as necessary.

By default, background images repeat horizontally and vertically to fill the entire space of the background layer.Ĭhange this by using the background-repeat property with one of the following values:

Create a simple background css