Stretch and Scale a CSS Image in the Background - With CSS Only

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.

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

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

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

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
http://css-tricks.com/perfect-full-page-background-image/

CSS stretch or fit background image

EDIT:

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

END EDIT

Try:

background-size: cover;

This will fit the width or height and overflow the rest

Or:

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 - 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.

CSS: scale background SVG in only one direction

So I tried around and found a possibility:

in Inkscape or in a text editor, set the following viewBox according to the size of your image – so if your image is 100*20px set it like this: viewBox="0 0 100 20"
in a text editor, add preserveAspectRatio="none" to the SVG tag
also, in the SVG tag set the height and width in percents: width="100%" height="100%"
in the CSS markup, then simply use background-size: 100% 20px;

With these steps it is possible to scale the background SVG using CSS in the same way that one would scale any bitmap image.

If image is not wide enough, how to make it stretch to the width of the window?

from the doc

When using layout='fill', the parent element must have position:
relative
This is necessary for the proper rendering of the image element in
that layout mode.

What can you do is :

CSS :

add relative to the landingImage class and remove margin auto

.landingImage {
  z-index: 0;
  background-size: cover;
  top: 0;
  padding: 0;
  display: block;
  width: 100vw;
  position: relative;
}

Wrap Image on the div

<div className='landingImage '>
    <Image 
        layout='fill' // required
        objectFit='cover' // change to suit your needs
        src='orcas' //
    />
</div>

Stretch and Scale a CSS Image in the Background - With CSS Only