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

Dynamischer Hintergrund der sich an Browser anpassen soll

K

komarovksi

Neues Mitglied
Hallo Freaks

Ich habe da mal eine knifflige Aufgabe für Euch:

Ich möchte ein Hintergrundbild haben, dass sich an der Browsergrösse anpasst. Es soll von links oben anfangen und sich proportional skalieren.
Wenn es sich aber Proportional skaliert, wird es ja auf der linken Seite immer ein Ende haben.
Hinter diesem Bild soll ein einfarbiger Hintergrund gesetzt werden, der den Hintergrund ausfüllt wenn das Bild ganz Links aufhört.

Mit ganz oben meine ich nicht ganz oben, weil dort ein Balken vorgesehen ist. Das Hintergrundbild soll also nach dem Balken anfangen, und nicht absolut oben. Sonst würde es ja einen Teil vom Bild abschneiden.

Ich habe Euch ein Bild angehängt:layout.jpg
Rot ist der Balken oben. Der sollte auf der Seite immer dargestellt werden können. Also er bleibt immer "top", auch wenn man nach unten scrollt.
Blau ist der Hintergrund hinter dem Bild der den Rest ausfüllt.

Ich hoffe ich habs Euch gut beschrieben und freue mich auf Eure Antworten.
 
Willkommen im Forum.

Ich glaube nicht, dass da mit CSS was hinzubiegen ist.

Da wirst du vermutlich auf eine Positionierung der Elemente per JavaScript ausweichen müssen.
 
HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>Demo</title>
        <style>
/*<![CDATA[*/

body {
    overflow: hidden;
}

#top {
    background: red;
    height: 30px;
    position: absolute;
}

#left {
    background: blue;
    position: absolute;
}

#image {
    background: green;
    width: 640px;
    height: 480px;
    position: absolute;
}

#image img {
    width: 100%;
    height: 100%;
    display: block;
}
/*]]>*/
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>
            /*<![CDATA[*/

            $(function () {
                $(window).bind('resize', function () {

                    // Width and height of image in #image
                    var imageAspectRatio = 799 / 510;

                    var vp = {
                        width  : parseInt($(window).width()),
                        height : parseInt($(window).height())
                    };

                    $('#top').css({
                        top   : '0px',
                        left  : '0px',
                        right : '0px'
                    });

                    var imageRect = {
                        top    : 0,
                        left   : 0,
                        width  : 0,
                        height : 0
                    };

                    imageRect.top = parseInt($('#top').css('height'));

                    imageRect.height = (vp.height - imageRect.top);
                    imageRect.width = Math.floor(imageRect.height * imageAspectRatio);

                    imageRect.left = vp.width - imageRect.width;

                    $('#image').css({
                        top    : imageRect.top + 'px',
                        left   : imageRect.left + 'px',
                        width  : imageRect.width + 'px',
                        height : imageRect.height + 'px'
                    });

                    $('#left').css({
                        top    : imageRect.top + 'px',
                        left   : '0px',
                        width  : imageRect.left + 'px',
                        height : imageRect.height + 'px'
                    });

                });

                $(window).trigger('resize');
            });

            /*]]>*/
        </script>
    </head>

    <body>
        <div id="top">#top</div>
        <div id="left">#left</div>
        <div id="image"><img src="http://upload.wikimedia.org/wikipedia/commons/2/2b/Westfalenstadion_von_oben.jpg" /></div>
    </body>

</html>
 
1000 Dank. Man man man. Super hey. bin voll begeistert. kann man hier bewertungen abgeben?

Ich hab aber noch ein klitzekleines Problem: der rote Balken ist ein .png Bild. Der hat einen Schatten unterhalb. Dieser Schatten ist von der Kante bis unten 12px.
Jetzt habe ich mit z-index den roten Balken nach vorne geholt und das #image mit margin-top: -12px; nach oben verschoben. Das sieht jetzt super aus, jedoch hat es jetzt am unteren Rand einen Abstand von 12px. :(

Habe schon einiges versucht, jedoch ohne Erfolg.

Gruss Marko
 
Zuletzt bearbeitet:
Ja, passt schon. Ich hatte gerade Lust, so was in der Richtung zu machen. Normalerweise wäre das aber schon ein bisschen „too much“.

Bewertungen: Theoretisch auf dem Sternchen-Symbol links unten bei den Beiträgen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben