0

Finally got my main parallax image to scale on mobile with background-size: 100% auto, but now there's a large empty space after the image where the div isn't scaling down to mobile size. Please help! Here's the site.

css

.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
height: 100%;
width: 100%;
}

.hsContainer {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}

.hsContent {
max-width: 450px;
margin: -150px auto 0 auto;
display: table-cell;
vertical-align: middle;
color: #ebebeb;
padding: 0 8%;
text-align: center
}
walther
  • 13,466
  • 5
  • 41
  • 67
Kelly O'Toole
  • 1
  • Using `background-size: cover` should work better in this case... – Shikkediel Apr 26 '15 at 22:29
  • I was using background-size: cover, but then the image is ridiculously huge. Is there no easy way to make the div responsive? – Kelly O'Toole Apr 26 '15 at 22:41
  • You could use a media query to include a different background image for portrait or landscape. If the image ratio is fixed, there's no way that I know to get around it either showing the horizontal *or* vertical middle when resizing the window. – Shikkediel Apr 27 '15 at 00:11

1 Answers1

0

background-attachment: fixed; does not tend to be supported by mobile browsers. In my experience it tends to cause some undesirable behaviour.

This might help: Background-attachment: fixed not working on android/mobile

In addition: I think the p tag is causing your problem. Inspecting the elements shows that the P tag is taking about 20-30px height. but has no content in it.

Community
  • 1
  • 1
  • Thanks, I removed the p tag and nothing changed. Also added the overflow tag and it just made my text disappear. Thanks though! – Kelly O'Toole Apr 27 '15 at 00:14