How can I make sure that the background images stay fixed regardless of the amount of text on the page? I have two background images, one on the left and one on the right. The text article is overlaid on top of these images. However, each page has a different amount of text, causing the images to not align properly. If I add height: 100% to .pozadi, the images stay in place on every page but the text overflows its parent element (.pozadi).
I understand that providing a webpage as an example may not be ideal since it could change or disappear. However, let me try to explain my issue better.
If you visit this link - - and open the pages "prodej kompresorů" or "opravy kompresorů", you will see the helix in the background which illustrates my problem.
The sroubovice attribute belongs to the body, so I created a wrapper div for demonstration purposes.
#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> If your current compressor station is failing or if you're designing a brand new compressed air installation, we can offer solutions using high-quality compressors and other accessories from companies like <a href="gardnerdenver.html">Gardner Denver</a> and <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>Request a price quote</li>
<li>Let's discuss your project together and suggest the ideal solution.</li>
<li>Don't hesitate to contact us.</li>
</ul>
</div>
<!-- End of the pozadi div -->
</div>
<!-- End of the wrap div -->