Question

我想问一下如何“锁定”背景img无论页面上的文本数量多少。我有2个背景图片（左边1个，右边1个）。那是文章文章。在每个页面上都有不同数量的文本和imgs不在同一个地方。如果将height: 100%添加到.pozadi imgs锁定并且位于每个页面上的相同位置，但在这种情况下，文本会溢出其父元素（.pozadi）。

我知道将网页作为示例并不是最好的方法，因为可能不会永远存在修复，但我认为例如。我在下面做的不够好。

http://matmasar.wz.cz/kompresory/kompresory.html我在谈论背景中的螺旋。如果您打开“prodejkompresorů”或“opravykompresor ......”页面，您可能会更多地了解我的问题。

sroubovice是body的属性，所以我做了一个包装div。例如。

		#primary_nav_wrap {
  float: left;
  width: 22%;
  margin: 0;
  z-index: 1;
}


#sroubovice {
  background-image: url(http://matmasar.wz.cz/fotky/pozadi.png), url(http://matmasar.wz.cz/fotky/pozadi.png);
  background-position: left, right;
  background-repeat: no-repeat;
  height: 100%;
}


.tlacitka {
  color: white;
  background: #000;
  padding: 10px 20px 10px 20px;
}


.pozadi {
  background: #e7f1f5;
  float: right;
  width: 76%;
}

<div id="sroubovice">
  <img src="../fotky/zahlavi3.jpg" id="zahlavi">
  <article>
    <section>
      <h1>Prodej kompresorů</h1>
      <div id="wrap">
        <nav id="primary_nav_wrap">
          <ul>
            <a href="../index.html">
              <li class="tlacitka" style="border-top-left-radius: 15px;">Domů</li>
            </a>
            <a href="kompresory.html">
              <li class="tlacitka">Kompresory</li>
            </a>
            <a href="opravy.html">
              <li class="tlacitka">Opravy kompresorů</li>
            </a>
            <a href="../kontakt.html">
              <li class="tlacitka" style=" border-bottom-left-radius: 15px; border-bottom: none;">Kontakt</li>
            </a>
          </ul>
        </nav>
        <div class="pozadi">
          <br> Pokud Vám dosluhuje Vaše stávající kompresorová stanice nebo projektujete zcela novou instalaci stlačeného vzduchu, můžeme Vám nabídnout řešení s použitím velmi kvalitních kompresorů a dalšího příslušenství pro úpravu stlačeného vzduchu
          firem <a href="gardnerdenver.html">Gardner Denver</a> a <a href="compair.html">CompAir</a>.
          <a href="gardnerdenver.html">
            <img src="../fotky/gardnerdenver.png" alt="Gardner Denver logo" title="Gardner Denver logo" class="logo"></a>
          <a href="compair.html"><img src="../fotky/CompAir.png" alt="CompAir logo" title="CompAir logo" class="logo" style="margin-bottom: 50px;"></a>
          <ul style="font-weight: bold;">
            <li>Napište si o cenovou nabídku</li>
            <li>Společně zkonzultujeme Váš projekt a navrhneme ideální řešení.</li>
            <li>Neváhejte nás kontaktovat</li>
          </ul>
        </div>
        <!-- Konec div class pozadi -->
      </div>
      <!-- Konec div id wrap -->

Answer 1

试试这个：

#sroubovice {
    background-position: center top;
}

Answer 2

我找到了解决方案。

我从.pozadi移除了body，并将article替换为div作为body的第一个子元素。所以它看起来像这样

<body>
<div id="sroubovice">
<section>
....
</section>
</div>
</body>

然后将height 100%和background-position: left top(or 140px for more exact result), right 140px添加到.pozadi

#sroubovice{
background-image: url(../fotky/pozadi.png), url(../fotky/pozadi.png);
background-position: left 140px, right 140px; 
background-repeat: no-repeat;
height: 100%;
}

更改不同页面上的背景图片

2 个答案: