Da ist ein HTML5 Data Attribute verbaut, welches wohl via jquery verarbeitet wird
und dort eine class in die divs setzt: (style="height: 579px;")
Code:
<header data-autoprogress="5" style="height: 579px;">
<div id="headercontainer" style="height: 579px;">
<img src="../images/dein-header.jpg" alt="">
</div>
</header>
Die css-Angaben für das image an sich sind dann prozentual und die Imagegröße orientiert sich dann
an der
height der gesetzten css-Klassen der beiden eltern-container (die dann immer einen Ticken höher sind als dein Image):
Code:
header img {
width: 100%;
display: block;
border: 0;
position: absolute;
height: 100%;
}
Zumindest wird dein Headerbild dann etwas vergrößert dargestellt, daher die Unschärfe dann.
Die
height wird bei den beiden Containern vorm img-tag jeweils generiert, je nach Browserfensterbreite usw. >> <header data-autoprogress="5" style="
height: 579px;">
Das wäre bsw. bei meiner aktuellen Browserfenstergröße das Verhältnis: 1754 x 584 Pixel
Dein Headerbild ist: 1600 x 533 Pixel …richtig?
Entweder kannst du via breakpoints und media querys unterschiedliche Headerbilder anwenden,
oder aber du gibst der Website und/oder den entsprechenden Containern eine seitliche max-width mit padding nach links und rechts,
damit das header-image nicht gestrecht wird – oder nur bei/für grosse(n ) Displays.
PS: kannst ja mal dein Headerbild größer bzw. breiter anlegen: bsw. 1850 x 616 Pixel oder 1850 x 533 Pixel
PPS: Aber generell bietet es sich hier eher nicht so an die Schrift mit in das Headerbild zu setzen, weil die Größe generiert und ggf. das Bild gestrecht wird.
