Die Vererbung der Seitenklassen ans Menü dürfte kein Problem sein. Du darfst das CSS dann nicht direkt auf die Klasse - Beispiel: .kontakt - aufsetzen, sondern nur dort, wo es gebraucht wird. Beispiel: body.kontakt o. .kontakt .my-bg-element.
[full-background-images] macht da sehr viel Berechnungen mit JS, beispielsweise die Größe von .backstretch neu zu berechnen. Für ein einfaches Hintergrundbild scheint mir das unnötig. Dein HTML sieht momentan so aus.
HTML-Code:
<div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 515px; width: 1802px; z-index: -999999; position: fixed;">
<img style="position: absolute; margin: 0px; padding: 0px; border: medium none; width: 1802px; height: 1367.12px; max-height: none; max-width: none; z-index: -999999; left: 0px; top: -426.059px;" src="files/images/hg_leistungen.jpg" alt="hg leistungen" title="hg leistungen">
</div>
<script type="text/javascript">
window.addEventListener("load-fullbg", function() {
;(function($){
$(document).ready(function() {
$.backstretch(
'body',
[{"src":"files\/images\/hg_leistungen.jpg","alt":"hg leistungen","title":"hg leistungen","caption":null}],
{
caption: false,
duration: 0,
fade: 0,
nav: false,
navClick: false,
navPrevNext: false,
centeredX: true,
centeredY: true
});
});
})(jQuery);
});
</script>
Zusätzlich wird dann noch jquery.backstretch.min.js geladen.
Probiere mal bitte, ob das auf Smartphones mit diesem Code funktionieren würde.
HTML-Code:
<div class="full-bg-img"></div>
PHP-Code:
/* CSS */
.full-bg-img {
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
background-image: url(http://amler-ingenieure.de/files/images/hg_leistungen.jpg);
background-size: cover;
background-position: center;
z-index: -1;
}
Das HTML kann irgendwo im Layout eingebunden werden, z.B. im Footer am Ende. Das CSS in deine CSS-Datei.
Lesezeichen