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

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tueftler

Neues Mitglied
22 Januar 2020
9
0
1
35
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

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

Code:
.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

Neues Mitglied
22 Januar 2020
9
0
1
35
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 :-/
 
Werbung: