Wie erstelle ich mit Foundation ein responsives Hintergrundbild im Vollbildmodus?

Ein reaktionsfähiges Hintergrundbild im Vollbildmodus erstellen

Als Neuling in der Front-End-Entwicklung stoßen Sie auf Herausforderungen, ein vollständiges Bild zu erreichen -Reaktionsfähiges Hintergrundbild mit dem Foundation-Framework. Ihr CSS-Code skaliert das Bild entsprechend, zeigt jedoch nicht das gesamte Bild an. Darüber hinaus möchten Sie Ihr .large-6 large-offset-6 columns div über dem Hintergrundbild auf Mobilgeräten positionieren.

Um Ihre Bedenken auszuräumen, überprüfen wir Ihre HTML- und CSS-Implementierung und erkunden alternative Lösungen:

Alternativer HTML- und CSS-Ansatz:

Bedenken Sie für eine einfachere Implementierung Folgendes Code:

<div class="main-header">
<pre class="brush:php;toolbar:false">@media screen and (max-width: 768px) {
  .reorder-on-mobile {
    order: -1;
  }
}

Durch Hinzufügen der Höhe: 100 %; Überlauf: versteckt; bis .main-header wird das gesamte Bild ohne Scrollen sichtbar sein. Die reorder-on-mobile-Klasse und die zugehörige Medienabfrage stellen sicher, dass .large-6 large-offset-6-Spalten über dem Hintergrundbild auf Mobilgeräten angezeigt werden, indem die Anzeigereihenfolge angepasst wird.

Vollständige Hintergrundlösungen:

Alternativ können Sie die folgenden umfassenden Lösungen erkunden, um einen responsiven Hintergrund im Vollbildmodus zu erstellen Bilder:

• CSS-Tricks: Perfektes ganzseitiges Hintergrundbild: https://css-tricks.com/perfect-full-page-background-image/

• Verwenden von JavaScript zum Verwalten der Bildgröße und -positionierung:

  <img class="background-image lazy" src="/static/imghwm/default1.png" data-src="bg.jpg" alt="">

  $(document).ready(function() {
    scaleBackground();
  });
  
  $(window).resize(function() {
    scaleBackground();
  });
  
  function scaleBackground() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
  
    if (windowWidth / windowHeight 

Durch das Verständnis der Wenn Sie die zugrunde liegenden Prinzipien berücksichtigen und diese Techniken anwenden, können Sie reaktionsfähige Hintergrundbilder erstellen, die die visuelle Attraktivität und Benutzererfahrung Ihrer Front-End-Anwendungen verbessern.