CSS Background fit every resolution

Question

Ok, so I am a newbie. I want my background (which is a image), to fit every resolution of the Web Browser no matter the browser resolution. I found this trick:

html { 
  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;
}

BUT all it does is fits the background to the full size of the display, not the browser. So if the display is 1366x768 and the browser is maximized, then the background is properly showing as "full". However if I then adjust the browser , the background image is not showing correctly.

So what do I need to do, so the background image is adjusted with the browser? So if the browser is 1300x700, the background image is 1300x700 but if the browser is 900x600 then the backgroud image is 900x600. Again, Im a newbie so please provide some examples.

Answer 1

cover This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

contain This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area. So try using contain instead of cover

100% This will scale 100% to both of height and width without any cropping.

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

This may help you: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

And this https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 2

You can actually work around this by inserting the background image you want with height and width attributes on it and setting 100% width on it. Then you can place your content on top of that image.

<div class="container">
    <img class="background-image" src="whatever.png" width="NATURAL WIDTH" height="NATURAL HEIGHT">
    <div class="content">
        This stuff will be on top of the image.
    </div>
</div>

<style>
    /* This element will == the height of the image */
    .container {
        position: relative;
    }

    /* This element is the background image */
    .background-image {
        width: 100%;
        height: auto;
        position: static;
    }

    /* This element contains the content which will be placed on top of the background image */
    .content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
    }
</style>