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%
.pozadi
.pozadi
sroubovice
body
#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 -->
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%;
}