Matěj Matěj - 1 year ago 123
CSS Question

Changing background image on different pages

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




Answer Source

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%;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download