CODEWITHSUNDEEP
htmlcss
Josh
Josh

Reputation: 47

Background image not scaling in mobile browsers

I've tried so many things... I can't get the site to scale to a mobile browser.

body{
  background: url("Photo-Carpentry-Tools-Wood-Planks-Collage-21.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100% 100%;
  margin: 0;
  background-attachment: fixed;
  max-width: 100%;
}

Additionally I've tried 

  <meta name="viewport" content="user-scalable = yes">

and a few other variations of above code.

The site is actually live now - it's www.readyshift.net - works fine in Chrome, doesn't work in mobile.

Upvotes: 1

Views: 1956

Answers (1)

Mike Donkers
Mike Donkers

Reputation: 3699

I've taken a look at your fiddle and noticed that you used background-size:100% in it on the html, body selector, after seeing this I visited your live website and saw that you used it there as well.

If you change the background-size:100% in the html, body selector, the background image scales to mobile sites properly (tested on your live website by changing the value through developer console).

TL:DR you want to change the html, body to:

html,body { 
    background: url("http://www.readyshift.net/css/Photo-Carpentry-Tools-Wood-Planks-Collage-21.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    margin: 0;
    background-attachment: fixed;
    max-width: 100%;
}

Upvotes: 1

Related Questions