5

I'm trying to create a website that has fullpage background images. I have gotten it work on desktop versions but when I push it to github and view it on my phone the background image is just a long image at the top. I'm using the background-size: cover in my css. Screen shots below. How can I make it so on mobile it takes up the whole space? Thanks :)

Desktop version: desktop version

Mobile version: mobile version

.background1
 {
 /* Location of the image */
 background-image: url(images/background-photo.jpg);

 /* Image is centered vertically and horizontally at all times */
 background-position: center center;

 /* Image doesn't repeat */
 background-repeat: no-repeat;

 /* Makes the image fixed in the viewpoint so that it doesn't move when 
 the content height is greater than the image height */
 background-attachment: fixed;

 /* This is what makes the background image 
 rescale based on itscontainer's size */
 background-size: cover;

/* Pick a solid background color that will
be displayed while the background image is loading */
background-color:#464646;
}

Html is as follows

<head>
<script src="https:
//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"</script>
<script
src="https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js"></script>
</head>
<meta charset="utf-8">
<title>Color</title>
<link rel="stylesheet" href="style.css">
<link href="animate.css" rel="stylesheet">
</header>

<body id="bodyID" class="background1">
</body>

<script src="javascript.js"></script>
droidev
  • 7,352
  • 11
  • 62
  • 94
Francine Jones
  • 51
  • 1
  • 5

2 Answers2

9

The problem stems from your <body> element not having the height to fit your device. You could stick a height: 100% on html, body, but I think the easier way to do this would be to add the following:

body {
  height: 100vh;
}

This sets the height of the body element to 100% of the viewport height on load. I tested this out and it solves the problem on my Android device and doesn't break it on desktop.

Side note: You can debug your Android device with Chrome inspector tools by following Google's instructions.

ian m
  • 504
  • 3
  • 7
0

Have you defined the min-height or max-height or height? May be u can share the Html codes to let me check. And for the background css, here's the better useful code.

background: #464646 url(images/background-photo.jpg) no-repeat center center;
background-size: cover;
Yon Glory
  • 76
  • 11
  • Hi, I tried your example above, however some of my other functions in my site stopped working. My site cycles through the full sized background images using javascript wheel events and its temperamental to certain things I change, I dont know why. Anyway in the body tag the class is swapped out to the different images in the css. Tell me more about the min height and max height. – Francine Jones Apr 26 '16 at 03:24
  • It works fine if only with the html and css for me. I think the script wheel function may not work properly for some reason. May be cos of the format. This is about for min-height and max-height. http://www.w3schools.com/cssref/pr_dim_max-height.asp http://www.w3schools.com/cssref/pr_dim_min-height.asp – Yon Glory Apr 26 '16 at 03:45
  • The wheel function won't work in mobile version. The image is not changing and it is not showing full screen either for me. – Yon Glory Apr 26 '16 at 04:00