Matt G. Matt G. - 2 months ago 12
Android Question

Website background displaying incorrectly on Android. Chrome DevTools not reflecting this

I launched a very simple splash page about a month ago. I designed the website trying to make sure that mobile users will see the website correctly. I used Chrome Dev tools and a few other online tools to make sure the website displays correctly on mobile.

The other day, however, a few of my android friends sent me a screenshot of my website. The background is not filling in as it is supposed to. This only happens on Android and for the life of me I can't figure out why. In all of my tools it appears fine which is making this very difficult to troubleshoot. When I preview as an Android phone such as a Galaxy S4 in the ChromeDev tools the background is shown correctly. Any ideas?



@import url(http://fonts.googleapis.com/css?family=Raleway:400,800,900);
html {
background: url('./freedom.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
font-family: 'Raleway', sans-serif;
background: rgba(247, 247, 247, 1);
}
container {
position: absolute;
height: 100%;
width: 100%;
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='./freedom.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./freedom.jpg', sizingMethod='scale')";
}
headline {
font-size: 400%;
margin-top: 10%;
font-weight: bolder;
color: #0A83FF;
position: relative;
display: block;
text-align: center;
letter-spacing: -7px;
}
description {
padding-left: 2%;
position: relative;
display: block;
text-align: center;
padding-top: 0.5%;
}
icons {
font-size: 225%;
}
a {
color: #000000;
}
a:visited {
text-decoration: none;
}
a:hover {
color: #0A83FF;
}
red:hover {
color: #FF0000;
}
green:hover {
color: #00BC00;
}
yellow:hover {
color: #E5E500;
}
@media only screen and (max-width: 574px) {
headline {
font-size: 200%;
font-weight: 600;
color: #0A83FF;
position: relative;
display: block;
text-align: center;
letter-spacing: -3px;
}
}

<link href="http://normalize-css.googlecode.com/svn/trunk/normalize.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<title>blah.com</title>
<head>
<link rel="stylesheet" href="css/master.css" media="screen" charset="utf-8">
<link rel="icon" type="image/png" href="favicon.gif">
</head>
<body>
<container>
<headline>Blah</headline>
<description>
<red>Hi</red>,
<green>There</green>,
<yellow>Friends</yellow>.
<icons>
<p>
<a href="http://www.github.com/blah" target="new"><i class="fa fa-github-square"></i></a>
<a href="http://www.twitter.com/blah" target="new"><i class="fa fa-twitter-square"></i></a>
<a href="https://www.linkedin.com/profile/view?id=308920572" target="new"><i class="fa fa-linkedin-square"></i></a>
</p>
</icons>
</description>
</container>
</body>

</html>





It's like the background is scaling in width, but not adjusting for height. And why would this just be happening on Android? I would greatly appreciate any help.

Answer

Just add min-height: 100%; to html selector with background. It will sure work!

html {
  background: url('./texas.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100%;
}
Comments