1

chartbeat.comのようないくつかの異なるセクションでランディングページを作成しようとしています。HTMLで次のことを行いました。

    <section class="payroll">
      <p>
        This is the Payroll Section
      </p>
    </section><!-- END class="payroll" -->  

    <section class="pos">
      <p>
        This is the Point of Sale Section
      </p>
    </section><!-- END class="pos" -->

これが私のCSSの外観です。

    .payroll {
    background-image: url('../img/payroll_bg.jpg');
    background-repeat: repeat-x;
    height: 100%;
}

.pos {
    background-image: url('../img/pos_bg.jpg');
    background-repeat: repeat-x;
    height: 100%;
}

問題は、セクションが離れて浮かんでいて、それらの間に大きなギャップが残っていることです。写真を参照してください。ウィンドウを縮小したり、要素を調べたりすると、セクションが浮き上がって重なり合います。

何か案は？ありがとう！

ここに画像の説明を入力してください

4

2 に答える 2

1

.wrapper divを作成し、これを使用します。

.wrapper {
width:100%; /* you can define as you want */
height:100%; /* you can define as you want */
position:relative;
}
.payroll {
background-image: url('../img/payroll_bg.jpg');
background-repeat: repeat-x;
height: 100%;
position:absolute;
top:0;
left:0;
width:0 auto;
}
.pos {
background-image: url('../img/pos_bg.jpg');
background-repeat: repeat-x;
height: 100%;
position:absolute;
top:0;
left:0;
opacity:0.9;
width:0 auto;
}
于 2013-01-02T16:39:22.317 に答える
1

問題はあなたの100％の高さが原因だと思います。パーセンテージの寸法はそのサイズに基づいているため、親要素に高さを設定する必要があります。

あなたがやったように、パーセンテージから離れることもトリックをするでしょう。

于 2013-01-02T16:55:49.190 に答える