Changing background image on different pages

Question

I would like to ask how to "lock" background img regardless of amount of text on page. I have 2 background imgs (1 in left, 1 in right). Over that is text article. On every page is different amount of text and imgs aren´t on same spot. If add

height: 100%

to

.pozadi

imgs locks out and are on the same spot on every page but in this case text overflows its parent element(

.pozadi

).

I am aware that giving webpage as example isn´t the best way because probably won´t be there unfix forever but I think that eg. I made below isn´t good enough.

http://matmasar.wz.cz/kompresory/kompresory.html I am talking about the helix in background. If you open page "prodej kompresorů" or "opravy kompresorů" you will probably understand my problem more.

The

sroubovice

is a attribute of

body

so I made a wrap div for example.

		#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 -->

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

I found out the solution.

I removed .pozadi from body and replaced article with div as a first child element of body. So it looks like this

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

Then added height 100% and background-position: left top(or 140px for more exact result), right 140px to .pozadi

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

Changing background image on different pages

Sign up