css - CSS3 - サイト全体をカバーする複数の背景

Question

サイト全体をカバーする複数の背景を上下に設定する方法を考えていました。私はこのようなことを意味します: http://us.battle.net/d3/en/reaper-of-souls/

私はまだ解決策を見つけることができませんでしたが、実際にはとても簡単に思えます:(

Answer 1

position absoluteまたはfixedの上に複数の分割を作成してみてくださいwidth:100% height:100%。各分割には独自のbackgroundがあります。以下を作成する必要がありますhtml and body 100%。

CSS:

html, body{
   height:100%
}

#div1{
 width:100%;
 height:100%;
 position:absolute;
 top:0;
 left:0;
 z-index:-1;
 background:(your background properties)
}

#div2{
 width:100%;
 height:100%;
 position:absolute;
 top:0;
 left:0;
 z-index:-2;
 background:(your background properties)
}

#div3{
 width:100%;
 height:100%;
 position:absolute;
 top:0;
 left:0;
 z-index:-3;
 background:(your background properties)
}

HTML:

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

それらを重ねて表示するには、透明な png にするか、不透明にする必要があります。ボディに背景を追加して別のレイヤーを追加することもできます

Answer 2

これを達成するために、私が今までやってきたことと私が知っていることは、background今のところ 2 つの s を追加する方法はありません。そこで、ヘッダーとフッターを 2 つ作成し、その上に背景を適用しますdiv。そして、体を形成するためにおそらく3分の1 。を に設定すると、簡単に重なり合う外観を実現できます。divCSS positionabsolute

<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>

CSSの場合、これを使用できます。

#header, #body, #footer
{
    background: url("img1.jpg");
    position: absolute;
}

Web サイトのほとんどはこれを行います。

これを試して。これはあなたのために働くかもしれません。

<style>
body
{
    margin: 0px;
}
div
{
    height: 33.3%;
}
#header
{
        background: url("1.jpg");
}
#footer
{
    background: url("2.jpg");
}
#body
{
        background: url("3.jpg");
}
</style>
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>