[html] CSS background image to fit width, height should auto-scale in proportion

I have

body {
    background: url(images/background.svg);
}

The desired effect is that this background image will have width equal to that of the page, height changing to maintain the proportion. e.g. if the original image happens to be 100*200 (any units) and the body is 600px wide, the background image should end up being 1200px high. The height should change automatically if the window is resized. Is this possible?

At the moment, Firefox looks like it's making the height fit and then adjusting the width. Is this perhaps because the height is the longest dimension and it's trying to avoid cropping? I want to crop vertically, then scroll: no horizontal repeat.

Also, Chrome is placing the image in the centre, no repeat, even when background-repeat:repeat is given explicitly, which is the default anyway.

Just add this one line:

    .your-class {
        height: 100vh;
    }

vh is viewport height. This will automatically scale to fit the device' browser window.

Check more here: Make div 100% height of browser window

Try this,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

I had the same issue, unable to resize the image when adjusting browser dimensions.

Bad Code:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

Good Code:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

The key here is the addition of this element -> background-size: contain;

Setting background size does not help, the following solution worked for me:

.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

It basically crops the image and makes it fit in, background-size: contain/cover still didn't make it fit.

I'm not sure what you're looking for exactly, but you really should check out these excellent blog posts written by Chris Coyier from CSS-Tricks:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

Read the descriptions for each of the articles and see if they're what you're looking for.

The first answers the following question:

Is there a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes. Also, make sure it retains its ratio (doesn't stretch weird). Also, doesn't cause scrollbars, just cuts off vertically if it needs to. Also, comes in on the page as an inline tag.

The second post's goal is to get the following, a "background image on a website that covers the entire browser window at all times. "

Hope this helps.

Background image is not Set Perfect then his css is problem create so his css file change to below code

html {  _x000D_
  background-image: url("example.png");  _x000D_
  background-repeat: no-repeat;  _x000D_
  background-position: 0% 0%;_x000D_
  background-size: 100% 100%;_x000D_
}

%; background-size: 100% 100%;"

Based on tips from https://developer.mozilla.org/en-US/docs/CSS/background-size I end up with the following recipe that worked for me

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}

Here's what worked for me:

background-size: auto 100%;

body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}