0

私のウェブサイトに、画面サイズに合わせて調整する、両側に 1 つずつ、2 つの別々の背景を用意しようとしています。

サイドがミッドラッパーで調整されるownedcore.comのように

HTML:

<div id="bleft"></div>
<div id="wrapper">a</div>
<div id="bright"></div>

CSS:

@charset "utf-8";

header, section, footer, aside, bside, article, figure {display: block;}
* {margin: 0; padding: 0;}

#wrapper {
    width: 1400px;
    margin: 0 auto;
    text-align: left;
    position: absolute;
}

#bleft {
    width: 700px;
    height: 700px;
    float: left;
    background-image: url(images/pageBGLeft.jpg);
    clear: left;
}
#bright {
    width: 700px;
    height: 700px;
    float: right;
    background-image: url(images/pageBGRight.jpg);
    clear: right;
}

右の背景を右に強制しませんが、1 行のラッパーを表示します

4

2 に答える 2

2

そのサイトは、次のように 2 つのコンテナーで 2 つの背景で動作するように見えます。

<body>
  <div id="A">
    <div id="B">
      <div id="wrapper"></div>
    </div>
  </div>
</body>

次にcss：

#A {
  background: url(...) top right no-repeat;
}
#B {
  background: url(...) top left no-repeat;
}
#wrapper {
  width: 700px;
  margin: 0 auto;
}
于 2012-12-06T16:56:52.633 に答える
0

<img>代わりに要素を使用しようと思います。たぶん、あなたposition:fixedは一方とleft: 0他方を試してみることができますleft: 50%。それぞれの幅50%と高さは自動で...少し遊んでみる必要があるかもしれませんが、コンセプトはうまくいくはずだと思います

于 2012-12-06T16:51:12.767 に答える