Stretch and Scale CSS Background

Stretch and scale CSS background

For modern browsers, you can accomplish this by using background-size:

body {
background-image: url(bg.jpg);
background-size: cover;

cover means stretching the image either vertically or horizontally so it never tiles/repeats.

That would work for Safari 3 (or later), Chrome, Opera 10+, Firefox 3.6+, and Internet Explorer 9 (or later).

For it to work with lower verions of Internet Explorer, try these CSS:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Stretch and scale a CSS image in the background - with CSS only

CSS3 has a nice little attribute called background-size:cover.

This scales the image so that the background area is completely covered by the background image while maintaining the aspect ratio. The entire area will be covered. However, part of the image may not be visible if the width/height of the resized image is too large.

How to stretch the background image to fill a div


background-size:100% 100%;

to your css underneath background-image.

You can also specify exact dimensions, i.e.:

background-size: 30px 40px;

Here: JSFiddle

How do I stretch a background image to cover the entire HTML element?

{ margin: 0; padding: 0; }

html {
background: url('images/yourimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

CSS stretch or fit background image


You tried background-size: 100%,

CSS interprets this as 100% width, automatic height which will look like this:

background-size: 100% auto;

What you want is the second argument (height) to be 100% too, so you should do this:

background-size: 100% 100%;



background-size: cover;

This will fit the width or height and overflow the rest


background-size: contain;

This will make the image as large as possible without changing it's aspect ratio.

You can read more about the css3 background-size property HERE

CSS Image size, how to fill, but not stretch?

You can use the css property object-fit. ("sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.")

.cover {
object-fit: cover;
width: 50px;
height: 100px;
<img src="" class="cover" width="242" height="363" />

CSS - Background image stretch horizontally and repeat vertically?

Instead of cover, use background-size: 100% auto; to size the background image to full browser width while maintaining aspect ratio for its height. Use this in conjunction with background-repeat: repeat-y; to tile it vertically.

Does background-size: cover stretch a background image?

It can stretch or constriction depending on image & background size.
enter image description hereIt will crops the extra portion which does not matched to div size.
Suppose you have a div with 400*250, and the background image is 400*350. If you use background-size: cover, then to cover all background it need to crop 100px height extra.

  • or, if you use 200*150 background image, then to cover all the
    background it is needed to extend the image minimum 400*300
    (200:150=2:1.5, multiply by 2 will 400*300, mind that if height
    increases, width also will be increased proportionally)

  • if we make the image 200*150 to 333.33*250, width will be not covered. (though
    height is ok)

  • if background image size u used is 800*500 or 200*125 or same proportion to it, no portion of image will be cut down, will see
    whole image

  • For, 8000*500 size image, it will compressed to cover 400*250 sized background, no portion will cut down but image will be compressed to fit.

Finally, background-size cover property will large or compress the image until all background will be covered, it don't care how waste the image will be.

Related Topics

Leave a reply