CODEWITHSUNDEEP
cssipadhtml
chris_bcn
chris_bcn

Reputation: 171

Using background-attachment:fixed in safari on the ipad

I'm looking to recreate an effect similiar to the popular science app. Basically have one big background image and then have HTML/CSS layer on top of that. When the user scrolls the content, then background-position of the image should remain in place, and not scroll.

Obviously in a 'regular' browser I would use background-attachment:fixed, but this doesn't seem to work on the ipad. I know position:fixed doesn't work as you might expect according to safari spec - but is there any way of achieving this?

Upvotes: 17

Views: 87966

Answers (7)

Angolao
Angolao

Reputation: 992

You can use this code to make a fixed background layer to hack into this problem.

#background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: 100%;
    background-image: url('xx.jpg');
    background-attachment: fixed;
}

And put <div id="background_wrap"></div> into <body></body>

<body>
<div id="background_wrap"></div>
</body>

Upvotes: 16

Andrew
Andrew

Reputation: 5200

Similar to Ig365, I found that Angolao's solution causes image repeat, depending on image proportions; however, Ig365's image doesn't mimic the placement of background-fixed . To do this, add a background-position-x: 50%;. (Depending on your image dimensions, you may also need background-position-y: 50%.)

#background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    background-position-x: 50%;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-image: url('imageURL');
    background-repeat: no-repeat;
}

Upvotes: -1

Fellipe J. de Sousa
Fellipe J. de Sousa

Reputation: 35

next solution in Css:

body {
  background-image: url( ../images/fundobola.jpg );
  background-position: top center;background-repeat:no-repeat;
  background-size: 1900px 1104px;
  overflow: -moz-scrollbars-vertical;
  overflow-y: scroll;
}

--- not use---- (cause: scroll disable )

position: fixed

Resolved in Ipad and iPhone

Upvotes: -3

John
John

Reputation: 11

I'm not that profi one, but I've solved this problem usin' jquery. It's quite simple) Here is the code:

	jQuery(window).scroll(function(){
		var fromtop = jQuery(window).scrollTop();
		jQuery(" your element ").css({"background-position-y": fromtop+"px"});
	});

Upvotes: 1

lg365
lg365

Reputation: 493

Expanding on Anlai's answer above, I found that solution was repeating my image as I was scrolling rather than keeping it fixed. If anyone else had this problem my CSS for the background_wrap ID is as follows:

#background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-image: url('../images/compressed/background-mobile.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
}

Just changed the background size and background attachment to make the image static.

Upvotes: 5

codewrangler
codewrangler

Reputation: 350

Mobile safari scales your whole site down to it's viewport size, including the background image. To achieve the correct effect, use the -webkit-background-size CSS property to declare your background size:

-webkit-background-size: 2650px 1440px;

(hat tip to commenter Mac)

Upvotes: 2

Alexander
Alexander

Reputation: 11

I believe you can place the background image in a div and set the z-index to appear behind other content. Afterwards you can use javascript to fix the position of the div which contains the background image.

Upvotes: 1

Related Questions