How to Stretch The Background Image to Fill a Div

How to stretch the background image to fill a div

Add

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 to get background image/ image to stretch to fill container via CSS?

Have you tried

background-size:cover;

Check some examples.

I had issues with webkit, background-size:cover and SVG background images. I solved it adding

-webkit-background-origin:border;

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')";

Background Image Stretch 100% Height of Div

You need to set the background-size property.
background-size: 100% 100%; will scale it to fill the container both horizontally and vertically.

I usually prefer background-size: cover; as it gracefully scales up the image as needed, maintaining the aspect ratio. Make sure to check the support for background-size, as it is a fairly new property.

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="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

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%;}

Or

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.

refer:https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

How do you stretch an image to fill a div while keeping the image's aspect-ratio?

Update 2019.

You can now use the object-fit css property that accepts the following values: fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

As an example, you could have a container that holds an image:

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;
}

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;
} 

---

Related Topics