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