内容背景图片未显示在正文中

Question

我在主div（.cont）中有一个背景图像，该背景图像未全屏显示，只是无法弄清楚如何使其在div的第二行（.mainl和.mainr）中可见。 该页面位于http://sallymilo.com/0test/

您能给我建议的解决方法：

CSS：

.cont { width:100%; max-width:1000px; margin:auto; background-image:url('https://myimagefiles.com/datasales/bg.png'); }
.hdrl { width:33%; height:131px; float:left; position:relative; background-image:url('https://myimagefiles.com/datasales/hdrl.png'); background-position: center center; background-repeat: no-repeat; }
.hdrr { width:67%; height:131px; float:left; position:relative; background-image:url('https://myimagefiles.com/datasales/hdrr.png'); background-repeat: no-repeat; }
.ttl { position:relative; float:left; z-index:10; margin:2em 1em 0 1em; color:#fff; font-family:Arial, Helvetica, san-serif; font-size:24px; font-weight:bold; text-align:center; }
.mainl { width:65%; float:left; position:relative; }
.mainr { width:35%; float:left; position:relative; }
.desc { color:#00356f; font-family:Arial, Helvetica, san-serif; font-size:14px; font-weight:bold; text-align:left; margin:0 2em 0 2em; }

HTML：

<div class="cont">
  <div class="hdrl"></div>
  <div class="hdrr"> 
<div class="ttl">[[Title]] of up to 80 characters will go into this area - right in this space!!!</div>
 </div>
<div style="clear: both"></div>
  <div class="mainl"> 
    <p class="desc"><br>
      [[Description]]</p>
  <p>tabs</p>
    <p align="center"><img src="thanks.png"  style="max-width:209px;"></p>
</div>
  <div class="mainr"> 
    <p align="center">[[Picture1]]</p>
    <p align="center">[[Picture2]]</p>
  </div>
</div>

Answer 1

您的clear:both都导致图像背景中断。

在mainr div之后，将clear添加到底部。 那么背景将延伸到mainl和mainr区。

标头不是全角的原因是因为您正在应用max-width属性，该属性仅允许最大宽度。 您的情况下为1000px 。

看一看： https : //jsfiddle.net/bqboyLmb/