Wie erreicht man eine ähnliche Heldeneinheit: http://tribalmedia.co.uk/

Ich bin mehr als alles andere neugierig, wie dies geschaffen wurde. Soweit ich das beurteilen kann, ist es mehr als wahrscheinlich, dass einige JS abhängig von der Browserhöhe einen prozentualen Mindesthöhenwert auf die Klasse anwenden.

BEARBEITEN: Wenn Sie die Größe Ihres Browsers ändern, wird die Eigenschaft "Mindesthöhe" geändert.

Jede Eingabe wäre sehr dankbar!

0
Cole Roberts 27 Nov. 2013 im 01:21

3 Antworten

Beste Antwort

Ich konnte meine Frage mit diesem Javascript lösen!

function resizeHero() {
    var windowHeight = $(window).height(),
    heroUnit = $(".hero-unit");
    heroUnit.css({
        minHeight: windowHeight
    });
}

$(document).ready(function() {
    resizeHero();
    $(window).on("resize", resizeHero);
});
0
Cole Roberts 28 Mai 2014 im 21:30

Es ist nur das CSS-Zeug. Das Folgende ist das CSS, das von der jeweiligen Website verwendet wird.

.site-header { background-position: center bottom; background-repeat: no-repeat; background-size: cover; color: #FFFFFF; min-height: 618px; position: relative; }

0
Durai 26 Nov. 2013 im 21:28

Lesen Sie einfach das CSS:

.site-header {
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFF;
    min-height: 618px;
    position: relative;
}

Demo: http://jsfiddle.net/qwertynl/5a343/

1
qwertynl 26 Nov. 2013 im 21:24