DIVの背景イメージはdiv内に収まらない

Question

私は2 divという要素を持っています。 1つは、私が背景をしたいと他のdivと同じサイズを持っている "profilen"と呼ばれ、別のdivの要素の中に配置されている "profilbg"という名前の要素に背景を保つが、背景画像はdiv。

ここで私は

<style> 
.profavataren { 
    float:left; 
    width:250px; 
    height: 250px; 
    border-color: #000000; 
    border-width: 1px 1px 1px 1px; 
} 
.profuin { 
    float: right; 
    width: 350px; 
    height: 175px; 
    padding-top: 75px; 
} 
.leftcolum { 
    border-style: none none solid none; 
    padding: 0px; 
    border-color: #000000; 
    border-width: 1px 1px 1px 1px; 
} 
.centercolum { 
    border-style: none solid solid none; 
    padding: 0px; 
    border-color: #000000; 
    border-width: 1px 1px 1px 1px; 
} 
.rightcolum { 
    border-style: none none solid none; 
    padding: 0px; 
    border-color: #000000; 
    padding-left: 3px; 
    border-width: 1px 1px 1px 1px; 
} 
.centerTable { margin: 0px auto; } 
.profilen { 
width: 100%; 
text-align: left; 
} 
.profilbg { 
background: url(<?php echo $uin->backgroundimg; ?>); 
background-repeat: no-repeat; 
background-size:cover; 
} 
.profilsize { 
    width: 600px; 
    margin: auto; 
} 
</style> 
<div class="profilsize" align="center"> 
    <table width=100% cellspacing=0> 
    <tr><td class="subTitle" ID="title" colspan="2"><b><font face="monbaiti" size="3" color="a1a1a1"><?php echo $uin->login; ?></font><?php echo $ledelsen; ?></b></td></tr> 
    </table> 

    <div class="profavataren"> 
    <img src="<?php echo $uin->avatar; ?>" height="250" width="250"> 
    </div> 
    <div class="profuin"> 
    <div align="center" style="padding-left: 35px; padding-right: 35px;"> 
     <table align="center" class="centerTable"> 
     <tbody> 
      <tr><td class="leftcolum">Brukernavn:</td><td class="centercolum">&nbsp;</td><td class="rightcolum"><?php echo $uin->login; ?></td></tr> 
      <tr><td class="leftcolum">Status:</td><td class="centercolum">&nbsp;</td><td class="rightcolum"><?php echo $status; echo "($online)"; ?></td></tr> 
      <tr><td class="leftcolum">Penger:</td><td class="centercolum">&nbsp;</td><td class="rightcolum"><?php echo $penger; ?></td></tr> 
      <tr><td class="leftcolum">Brukernavn:</td><td class="centercolum">&nbsp;</td><td class="rightcolum"><?php echo $uin->login; ?></td></tr> 
     </tbody> 
     </table> 
    </div> 
    </div> 
    <div class="profilen"> 
    <div class="profilbg"> 
     <?php echo nl2br($uin->profilen); ?> 
    </div> 
    </div> 
</div> 

を試みたし、ここで私は

<div class="profilen"> 
    <div class="profilbg"> 
    <?php echo nl2br($uin->profilen); ?> 
    </div> 
</div> 

の内側にそれをしたいが、背景には常にそれらのdiv要素オフ突き出しdiv要素だコードです。 このスクリーンショットを見ると、divがその下にあるため、背景イメージが赤い線より上にならないように見えます。ページ上の他の要素が全て浮遊しているので http://prntscr.com/ahslxw

Answer 1

.profilen { 
    background: url(<?php echo $uin->backgroundimg; ?>); 
    background-repeat: no-repeat; 
    background-size:cover; 
    height="250" 
} 

Answer 2

試してみると、あなたのprofilbgのCSSのfloatをクリアするには、この

.profilbg { 
    background: url(<?php echo $uin->backgroundimg; ?>); 
    background-repeat: no-repeat; 
    background-size:cover; 
    clear:both; 
} 

Answer 3

よう

、背景画像はまた、彼らの後ろに移動します。これを修正するには、 "profilen" div が上記の左右のフローティング要素をクリアするようにしてください。バックグラウンドイメージを追加すると、フローティング要素の下に表示されます。したがって、「profilen」のCSSを次のように変更してください。

.profilen { 
    width: 100%; 
    text-align: left; 
    clear: both; 
}