Stretch Background Image CSS

Stretch background image css?

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

Works in:

  • Safari 3+
  • Chrome Whatever+
  • IE 9+
  • Opera 10+ (Opera 9.5 supported background-size but not the keywords)
  • Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

In addition you can try this for an IE solution

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

Credit to this article by Chris Coyier

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

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.

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.

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" />

Does background-size: cover stretch a background image?

It can stretch or constriction depending on image & background size.
Sample ImageIt 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.

CSS: Background image to stretch and squash to 100% area of div with no overflow no repeat

You can also try

background-size:100% 100% with

body { width:100% ; height:100%;}


Use object-fit: fill;

fill:The entire object will completely fill the box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit.


Related Topics

Leave a reply