[ERLEDIGT] Div mit Background-Image nicht 100% width - Iphone

[Tueftler]

Hallo zusammen,

möchte folgendes erreichen.

Bei Aufruf der Seite ein Bild mit 100 vh Höhe und 100% width. Das Bild soll also erst einmal genau eine Fenstergröße füllen. Davor liegt vertikal und horizontal zentriert ein Logo als SVG.

Auf dem Monitor (1920x1080px) wird alles wie gewünscht angezeigt. Auf dem Iphone (laut Firefox 375x667px) füllt das Bild aber nicht die ganze Breite. Ich kann noch ein paar Pixel nach rechts schieben.

Hier mein Code.

HTML

<section class="img_header">
    <div class="text_img_header_centered">
    <img src="assets/img/kerosin-media_weiss.svg" alt="">
    </div>
</section>

CSS

.img_header {
  background-image: url('/assets/img/flugzeug_375x667.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height:100vh;
  width: 100%;
  margin:0vh 0vh 5vh 0vh;
  display:flex;
  align-items: center;
  justify-content:center;

div {
    max-width:50%;
    img {
      width: 100%;
    }
  }

}

Das Problem, dass die Seite bei Smartphones nicht mehr auf 100% width liegt, tritt nur bei der index.html auf. 2 weitere Pages (eine mit Formular und eine mit bisher nur nem Slider und etwas Text drunter) werden perfekt auf 100% und ohne Balken angezeigt.

Muss fast mit diesem Container zu tun haben. Würde mich sehr über Eure Hilfe freuen. Gerne auch über einen komplett neuen Code für ein Responsive Bild mit Logo zentriert drüber über die komplette Bildschirmweite.

Freue mich sehr auf Eure Antworten.

 

[Tueftler]

OMG. Das Wort Kommunikationsprojekt hat in Verbindung mit der Überschriftengröße die Breite meines Bildes überschritten. Beide divs sind Kindelemente eines übergeordneten Divs auf der selben Ebene. Muss mal schauen, wie ich das löse. Fürs erste hat es geklappt, das ohnehin viel zu lange und hässliche Wort auszutauschen :-/