Fix image on Safari browser_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-19 00:56 出处：网络

I use Safari to browse the net, i need to display an image as the background, my problem is that i want the image to be fixed and the text still scrollable.

相关专题：css xhtml

I use Safari to browse the net, i need to display an image as the background, my problem is that i want the image to be fixed and the text still scrollable. My code that doesn't work is this :

<html>
<head>
<开发者_StackOverflow;style type=text/css>
body{background-image:url('background.png');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>My text goes here</body>
</html>

with this code, i have both the image and the text scrollable.

Not entirely sure what's going on, as your code looks fine. Maybe you don't actually want it fixed? Fixed means the image wont move at all as you scroll, is that what you want?

I set up a JSFiddle which works fine. The only thing I did differently is declare all the info in the shorthand background property:

body {
    background: url(http://2.bp.blogspot.com/-xpgIOttwTTg/TWRni-cC-tI/AAAAAAAAA-o/9GMqFyMnQCY/s1600/african-elephant2.jpg) repeat fixed;
}

And the JSFiddle: http://jsfiddle.net/jackfranklin/HYagh/

Checked & it works fine in Safari.

EDIT - now I know you're talking about Mobile Safari, position:fixed AND background-attachment:fixed; is not supported in iOS Safari up to iOS4, however is is supported in the upcoming iOS5.