Projekte

Hintergrund in Wordpress einbinden und fixieren

Der einfachste Weg, im Hintergrund einer Website zu fixieren, wäre auf body ein Hintergrundbild u.a. mit der CSS-Eigenschaft background-position: fixed zu positionieren. Allerdings bestünde dann das Problem, dass der gewünschte Effekt bei iOS Geräten (iPhone und iPad) aus bliebe. Wenn man möchte, dass das Hintergrundbild auch bei iOS Geräten (iPhone und iPad) beim scrollen fixiert bleibt, muss es sich auf einem separaten div befinden. Der Grund dafür ist, dass iOS die CSS Eigenschaft background-position: fixed aktuell nicht unterstützt.

Bei Wordpress stellt sich die Frage, ob ein Bild für die gesamte Website oder pro Beitrag bzw. Seite eingebunden werden soll. Man kann entweder das Bild aus dem Theme-Hintergrund verwenden: 

 

<div class="bg" style="background-image: url(<?php header_image(); ?>)"></div>

 

oder das aus einem einzelnen Beitrag (Post oder Seite):

 

<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'full') ); ?>
<div class="bg" style="background-image: url(<?php echo $url ?>)"></div>
<?php endif; ?>

 

direkt nach dem body Anfang positionieren.

Sheydin Studio gestaltet Interaktionsabläufe, verwandelt Daten in Information und entwirft einzigartige Erscheinungsbilder … mehr

Top