CODEWITHSUNDEEP
htmlcssbackground-image
Sean Stevens
Sean Stevens

Reputation: 104

Fixed background on mobile device

I am having trouble setting the background of this page - http://troov.co/team/ (on a mobile device) so that the background image is fixed, and just the content scrolls down.

At the moment, the background image scrolls down with the content, meaning that there's a lot of white space and so the text underneath the photos is not viewable.

I've tried fixing the width and the height at 100% and putting background-attachment: fixed;

Perhaps I'm putting it in the wrong place, but none of these solutions are working. Would really appreciate any help please.

The CSS code is as follows:

.container-fluid.team {
  background-image: url(../images/bg_teampage.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%; 
}

Upvotes: 1

Views: 10777

Answers (5)

Dustin Poissant
Dustin Poissant

Reputation: 3418

I am aware of an old bug from iOS Safari where they didn't support background-attachment: attached; but I thought they fixed this bug a year or so ago. Do you mind telling us what device/OS/browser you are testing this on?

I use to attempt to fix this issue by creating a full size div and sending it to the back (negative z-index).

HTML

<body>
  <div id='background'></div>
  <!-- Actual Page Content Here -->
</body>

CSS

#background {
  background-image: url(path/to/image.jpg);
  position: fixed;
  top: 0;
  left: 0;
  z-index: -999999999;
}

I remember there being a few different plugins/libraries I would use to automate this and give other functionality. But I have not seen this issue in at least a year sense an iOS update.

Check out the jQuery backstretch plugin.

Upvotes: 0

rajesh
rajesh

Reputation: 1485

Add the below CSS styles:

body{
   overflow:hidden;
   }

.container-fluid.team {
background-image: url(../images/bg_teampage.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 163%;
}

Upvotes: 1

Topr
Topr

Reputation: 882

If you want to keep the background-image inside .container-fluid you could add position:fixed and overflow-y: scroll to .container-fluid.team like this:

.container-fluid.team {
   background-image: url(../images/bg_teampage.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
   height: 100%; 
   position: fixed;
   overflow-y: scroll;
}

Otherwise I would've moved the background to the body.

Upvotes: 0

JRulle
JRulle

Reputation: 7568

apply the fixed background to the body:

body {
  background-image: url(../images/bg_teampage.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
}

Upvotes: 2

jdu
jdu

Reputation: 571

While your background is fixed, the div it's applied to is not. You can set "container-fluid team" to be position absolute and do some z-index stuff, or you can attach your fixed background image to the body of the document.

Upvotes: 0

Related Questions