Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Justin Goldby
seal-mask
.a{fill-rule:evenodd;}techdegree
Justin Goldby
Full Stack JavaScript Techdegree Student 12,754 Points
Posted by Justin Goldby
.a{fill-rule:evenodd;}techdegree
Justin Goldby
Full Stack JavaScript Techdegree Student 12,754 Points

background-image "cover" has whitespace on chrome android

this bug is driving me nuts!

I have a website where I placed a background image on the body element and did the usual no-repeat center center fixed cover stuff, It looks fine on every browswer I have tried except android chrome so far, On android chrome it seems to give the home page some scrolling and you can show white space several hundred pixels high. It works on chrome desktop, and even the various android dev tool simulators.

Here is the CSS I'm using -

body {
  background-color: transparent !important;
  background: url('../../images/pagesbackground.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  overflow: auto;
}

I've tried this same css on the HTML element as well to no avail (with a combination of height: 100vh / 100% on both body and or html element). I've also tried taking off the background attachment-fixed, but then on other pages it doesnt scroll down for the content that expands down. I'm using bootstrap, and Angular to serve each page as a template. This is the index.html that serves the templates in the ng-view.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Goldbee Dev</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="dist/styles/all.min.css">
  <link href='https://fonts.googleapis.com/css?family=Lobster|Roboto|Titillium+Web|Rock+Salt|Condiment|Mate+SC|Pacifico|Luckiest+Guy' rel='stylesheet' type='text/css'>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>
</head>
<body ng-app="app">


    <div ng-view></div>








<script src="vendor/angular.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-animate.js"></script>
<script src="dist/scripts/all.min.js"></script>
</body>
</html>

I've also tried just making the background image a div that contains the ng-view and doing the same thing with no success. Anyone have suggestions?

1 Answer

reginabattle
reginabattle
16,646 Points
reginabattle
reginabattle
16,646 Points

Here's one solution:

body {
  height: 100vh;
}

An alternative (also supports older browsers):

body, html {
  height: 100%;
}