0

A friend of mine has set up a little landing page and is asking me about an issue on mobile (Chrome). The background image (on the body) is set to cover

body {
background-image: linear-gradient(135deg, rgba(14, 113, 184, 0.8) 0%, rgba(28, 22, 53, 0.6) 100%), url("../img/bgvid.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

The background image will render within the full viewport, but if I scroll down, it is kind of cut of, check the images down below to see what I mean (the gray block). He is asking for my help but I really don't know what could be causing this. I tried to remove the footer (and set the body height to 100%), but it did not change anything.

Solved

Fix: Looks like fixed background do not work on mobile browsers. This fixed it:

background-attachment: scroll;
Community
  • 1
  • 1
Paranoia
  • 2,040
  • 5
  • 25
  • 27
  • The problem seems to be in the 2nd `row text-center` where the Sign Up Now button and the forms is inside. If you click on the button the problem seems to be temporary solved. So you may check these. – nstungcom Aug 06 '15 at 09:30

1 Answers1

0

CSS background image to fit width, height should auto-scale in proportion

body { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
Community
  • 1
  • 1
Amila Iddamalgoda
  • 4,166
  • 11
  • 46
  • 85