CSS background stretches to fill screen on Safari but not on iOS

问题

This CSS successfully stretches my background image to fill 100% of the screen area and not scroll on safari but not on iOS. How can I also prevent the image from scrolling on iOS?

body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: url(../img/background.jpg) center repeat-x;
    background-size: auto 100%;
    background-attachment: fixed
}

回答1:

body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: url(../img/background.jpg) center repeat-x fixed;
}

回答2:

I gave up trying to get my iPhone to play nicely with CSS, and had to resort to using jQuery.

In my webpage, I added a <div> which I want to fill the screen:

<body>
    <div class="cssFullScreen" />
    ...etc...

Then I added in two tablespoons of CSS...

<style>
    .cssFullScreen
    {
        position: absolute;
        left:0px;
        top:0px;
        background: url(BackgroundImage.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

..and a reluctant scoop of jQuery...

<script src="jquery-2.2.3.min.js"></script>
<script type="text/javascript">
    $().ready(function () {

        ResizeWindows();

        $(window).resize(function () {
            ResizeWindows();
        });
    });

    function ResizeWindows() {
        //  When the user resizes the window, we'll resize any DOM elements
        //  with the "cssFullScreen" class.
        var width = window.innerWidth ? window.innerWidth : $(window).width();
        var height = window.innerHeight ? window.innerHeight : $(window).height();

        $(".cssFullScreen").width(width);
        $(".cssFullScreen").height(height);
    }
</script>

It's not pretty, but it was the only thing I could find which really worked on an iPhone.

And strangely, this code only worked (on an iPhone) when applied to a div. If I tried to apply it directly to the html or body, it did nothing...

来源：https://stackoverflow.com/questions/22701235/css-background-stretches-to-fill-screen-on-safari-but-not-on-ios

标签

html

ios

css

background-image

stretch