我有2个部分,有2个背景图像覆盖这些部分的整个宽度和高度,两个都是“固定”位置
一切正常,直到我试着缩小看页面。第二部分“biosecond”的背景图片刚刚减半。我把它设置为固定。有人知道解决方案吗?也许更大的形象?再次,问题是当您缩小页面几次时。
这是JSFIDDLE缩小浏览器以查看乱糟糟的图像 这是Html,css很长,所以不要搞砸:
<div id="container">
<div id="bio">
<section>
<div class="centerMid" id="sndColmn">
<img src="images/profilepic.jpg" alt="Amir Cisija" width="300" height="300">
<div id="bscInfo">
<h4>Name </h4>
<h4>Born </h4>
<h4>Current residence </h4>
</div>
</div>
<h1><strong>Lorem ipsum dolor sit amet</strong></h1>
<br />
<p>Aliquam semper egestas orci <span class="span">Amir Cisija</span> rhoncus <span>"aortaFX"</span> pharetra ut. Nullam aliquet orci non lacus pellentesque commodo. Donec id leo ut ante pretium hendrerit id et arcu. Nam ut nisi orci. Integer venenatis finibus vulputate. Duis porttitor vel nunc eu iaculis. Mauris consectetur sit amet lectus id cursus.</p>
<br />
<h2><strong>Pellentesque habitant</strong></h2>
<br />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tempor est et lectus ornare molestie. Duis tincidunt lobortis ex vitae tincidunt. Ut posuere tortor vitae nisi elementum, non molestie erat pharetra. Donec eget placerat ante. Nulla vitae nunc id neque gravida lobortis. Morbi quam velit, volutpat non eros sit amet, tristique vehicula ipsum.</p>
<br />
<p>Integer finibus nunc nibh, id aliquam sem sollicitudin ac. In at elit a risus pellentesque posuere quis quis ipsum. Vestibulum at ante a turpis egestas pellentesque accumsan quis arcu. Nam suscipit ac nulla pretium rutrum. Maecenas semper dictum arcu quis ullamcorper.</p>
<br />
<p>Vestibulum tempor commodo ipsum. Integer consectetur purus est, quis congue diam tincidunt sit amet. Integer id mi vel ipsum dapibus semper. Integer ultricies ut enim ac faucibus. Ut ac magna non magna porta sodales. Nulla venenatis orci a turpis egestas, ut rutrum arcu consectetur.</p>
<br>
</section>
</div>
<div id="biosecond" class="biosecond">
<br />
<div class="secondSec">
<h2>Key Qualifications:</h2>
<br />
<ul>
<li>xxxxxxxx</li>
<li>xxxxxxxx</li>
<li>xxxxxxxx</li>
<li>xxxxxxxx</li>
<li>xxxxxxxx</li>
</ul>
</div>
<br />
<div class="secondSec">
<h2>Secondary Qualifications:</h2>
<br />
<ul>
<li>xxxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxx</li>
</ul>
</div>
<br />
<div class="secondSec">
<h2>Activities:</h2>
<br />
<ul>
<li>xxxxxxxx</li>
<li>xxxxxxxx</li>
<li>xxxxxxxx</li>
<li>xxxxxxxx</li>
</ul>
</div>
</div>
<div class="clearfooter"></div>
<div class="footer" id="footer"></div>enter code here