We want (for some reason likely involving horrifyingly bad site design) to tile four copies of this image into a 300x300-pixel element. Each value can be a , a , or auto.To specify the size of multiple background images, separate the value for each one with a comma. You cannot stretch a background image as such, but you can set it to repeat either horizontally, vertically or both: background-position:repeat-x; /* to repeat horizontally */ background-position:repeat-y; /* to repeat vertically */ background-position:repeat; /* to repeat horizontally and vertically */ By doing so, you can scale the image upward or downward as desired. In previous versions of Office, it was easy to do, but in Office 365 this seems to be impossible. So that the background image is always centered in the viewport, we declare:The above sets the scaling axis at the center of the viewport.Next, we need to deal with the situation where the content’s height is greater than the visible viewport’s height. Lifewire uses cookies to provide you with a great user experience. horizontally and vertically, until it reaches the end of the element:To avoid the background image from repeating itself, set the If you want the background image to cover the entire element, you This dimension will have us covered on most widescreen computer monitors currently being sold in the market, but at the expense of serving up a 1.7MB file.That huge of a payload just for a background photo is never a good thing under any sort of situation, but it’s exceptionally bad on mobile internet connections. When the output area and the image have different aspect ratios, the image is distorted by this stretching. To stretch a background image in HTML, use the CSS Here's what the image looks like at its original size:You can also use other units, such as pixels, and you can use the You will be able to see from the above example that the image repeats if any of its sides is smaller than the image's container. If only one value is … Here's the HTML in the image below. Clearly, it isn't ideal, but it will work as a fallback. Images. To add a background image on an HTML element, you can use the styleattribute: You can also specify the background image in the