Scale background img to the user's browser size

Question

I've went through all the relative answer in stackoverflow but haven't find the perfect fit. I am trying to make .background img fit the user's browser size no matter how user tries to resize the browser. Some relative questions are:

I am trying to create an effect similar to this site(it is mentioned on the Bootstrap official website as an example): http://riot.design/en/. Try to resize the browser and you will find out that the background img always scales and fits.

Is there a good way to achieve this effect?

that last 2 examples in your post is good. what don't you like about them? — Coenie Richards, Dec 11 '15 at 02:48
The background:cover; doesn't seem to work well.. I looking for the the same effect at the http://riot.design/en/ . Thanks for the help! — Kurt H, Dec 12 '15 at 19:59

score 0 · Answer 1 · answered Dec 11 '15 at 02:55

you can try something like this in your css.

html { 
  background: url(http://7-themes.com/data_images/out/60/6975736-   
android-background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

there are many options you can choose from.. just try to follow them here that fits your needs. https://css-tricks.com/perfect-full-page-background-image/

score 0 · Answer 2 · answered Dec 11 '15 at 03:12

litlitDM beat me to it while I was making a fiddle. My code differs a little from his/hers. Be sure the url is in single or double quotes. Using the fallbacks provided by litlitDM is always a good idea. I like to use postition: absolute but as noted earlier css-tricks is a great resource as there are many ways to do this.

Scale background img to the user's browser size

2 Answers2