1

背景に画像を使用しようとしています。ページのコンテンツの高さは 800px です。したがって、背の高い画面では、コンテンツの後に背景画像の一部が表示されるはずです。短い画面では、背景画像がほとんどまたはまったくない状態で、コンテンツが画面の下部で終了するように完全に収まる場合があります。

背景画像を自動的に拡張して、画面のサイズに関係なく画面全体を埋めたいです。高さを自動に設定するなど、いくつかのことを試しましたimg.extfullbackgroundが、スクロール領域がはるかに低くなり（3000pxなど）、100％がコンテンツのサイズになります。

背景画像を自動的に画面のサイズに拡張する方法を知っている人はいますか?

ここに私のHTMLのスニペットがあります:

</head>

<body class="extfullbackground">
    <img class="extfullbackground" src=".\background.png" alt="background" />
    <div class="topbackground">
            <div class="top">
                <div class="topleft">
                    <img class="pf_logo" src=".\pf_logo.png" alt="PF Logo"/>
                </div>
                <div class="topmiddle">
                    <h1 class="title">PF is Temporarily Unavailable</h1>
                </div>
                <div class="topright" ></div>
            </div>
        </div>
        <div class="bar"></div>
        <div style="width:1220px; height:600px; padding-top:0px; margin-top:0px; margin-left:auto; margin-right:auto; background-color:blue;">
        <div class="extcontentcontainer">
        <h2 class="subtitle">Please be patient while we update PF.</h2>
            <p class="pad10 line10">

これが私の CSS です: (注: CSS リセット スクリプトを使用しました)

body {
    position:relative;
    padding:0 0 0 0;
    margin:0 0 0 0;
    overflow-x:hidden;
}

.extcontentcontainer {
    width:820px;
    height:600px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding-top:0px;
    background-color:red;
}

    img.extfullbackground {
        position:absolute;
        z-index:-1;
        top:0;
        left:0;
        width:100%; /* alternative: right:0; */
        height:auto; /* alternative: bottom:0; */
        padding-left:0px;
        padding-right:0px;
        margin-left:0px;
        margin-right:0px;
    }
4

2 に答える 2

1 
body {
    background: url('background.png');
    background-size: cover;
}

これはIE8でうまくいきました。（私のiMacのエミュレーターでした）

それ以外の場合: 画像の高さを 100% に設定し、幅には何も設定しないでください。画像はその比率を維持し、ブラウザーの高さ全体をカバーするように拡張する必要があります。

于 2013-06-03T14:02:45.040 に答える
0

これを試してください（html）：

<img src="bg.jpg" class="bg" alt="achtergrond">

CSS:

img.bg {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index:-999;
    pointer-events: none;
}
@media screen and (max-width: 1024px) {
    img.bg {
        left: 50%;
        margin-left: -512px;
        pointer-events: none;
    }
}

これにより、画面の幅が 1024 ピクセルよりも広い場合は背景がフルスクリーンに引き伸ばされ、それより小さい場合は 1024 ピクセルのままになります。

于 2013-06-03T13:39:05.063 に答える