Bildgröße und Bildschirm

  • Hallo ich habe ein Bild was ich per CSS auf meinen Bildschirm abstimmen möchte.


    Und zwar möchte ich, dass es den ganzen Bildschirm bedeckt.

    Dazu möchte ich noch sagen, dass das Bild größer als der Bildschirm ist.

    Habe auch bei W3schools nachgeschaut, aber finde mein Problem nicht.


    Wenn ich folgendes eingebe:

    section

    {

    background: url(hintergrund.jpg);

    background-size: cover;

    width: 100%;

    height: 100vh;

    }


    bekomme ich ein Bild, welches den unteren Teil des Bildes nicht zeigt UND wenn man nach rechts scrollt einen weißen Abschnitt zeigt von oben nach unten.

    Was kann ich ändern, dass wirklich das ganze Bild zu sehen ist.


    Und wie wäre es wenn ich die Größe des Bildes prozentual verändern möchte. Sprich vom eigentlichen Bild zb 10% oder 110% usw?


    Danke

  • Wenn man dieses CSS verwendet, füllt das Bild das Browserfenster aus. Ausnahme ist ein schmaler Rand darum herum, den man mit body {margin: 0;} weg bekommt. Dann wird das Bild ohne Scrollbalken angezeigt. Wenn Du nach rechts scrollen kannst, muss das an anderem Inhalt auf deiner Seite liegen.


    Zitat

    welches den unteren Teil des Bildes nicht zeigt

    Das ist ein generelles Problem, wenn man ein Bild in einem vorgegebenen Rahmen anzeigt: Will man das Seitenverhältnis beibehalten, muss man in Kauf nehmen, dass oben oder seitlich abgeschnitten wird. Will man dagegen das Abschneiden verhindern, muss man in Kauf nehmen, dass sich das Seitenverhältnis ändert und das Bild verzerrt wird. Möchtest Du letzteres, musst Du background-size: 100% 100%; verwenden.


    Zitat

    Und wie wäre es wenn ich die Größe des Bildes prozentual verändern möchte. Sprich vom eigentlichen Bild zb 10% oder 110% usw?

    Ich glaube, das hatten wir schon in einem anderen Thread. Wenn Du z. B. 10% vom Bild haben willst, musst Du transform: scale(0.1); verwenden.

  • Hast Du da vielleicht width und height weg gelassen?

    ich habe herausgefunden woran es liegt... und zwar war darum ein div container der keine höhe hatte, also hat dieser eine höhe und breite von 0px und davon 100% ist genau NULL... richtig? also jetzt geht es ja, müsste das sein. Aber hast ja oben auch sowas ähnliches gesagt. thx.... mal ne andere frage

    ich habe dich ja weiter oben wegen dem bild gefragt was abgeschnitten wird.


    du meintest man müsste da background-size: 100% 100%; klappt auch. Das Bild ist dann bisschen verzerrt aber alles zu sehen. Wenn ich jedoch nur background-size: 100%; eingebe wird es wieder unten abgeschnitten. Warum?

    auch wenn ich

    background-size: 100%;

    height: 100%;

    dann ist es auch unten abgeschnitten.

    und auch bei

    background-size: cover;

    height: 100%;


    Ist schon komisch.

    nur wenn ich wirklich

    background-size: 100% 100%; dann passiert das nicht


    Aber warum? cover müsste doch so gesehen alles bedecken, oder?

  • Zitat

    und zwar war darum ein div container der keine höhe hatte, also hat dieser eine höhe und breite von 0px und davon 100% ist genau NULL... richtig?

    Genau, das war es, was ich oben gemeint hatte.

    Zitat

    Wenn ich jedoch nur background-size: 100%; eingebe wird es wieder unten abgeschnitten. Warum?

    Da musste ich selbst erst Mal genau nachlesen:

    https://wiki.selfhtml.org/wiki…d_-bilder/background-size

    Sie schreiben:

    Zitat

    Die erste Angabe spezifiziert die gewünschte Breite der Hintergrundgrafik, die zweite entsprechend die Höhe. Ist nur ein Wert gegeben, so wird die Höhe unter Beibehaltung des Seitenverhältnisses skaliert.

    D. h. ist das Seitenverhältnis von Container und Hintergrundbild nicht gleich, wird etwas abgeschnitten, oder es bleibt freier Raum bzw. das Bild wiederholt sich, abhängig von background-repeat.


    Zitat

    dann ist es auch unten abgeschnitten.

    und auch bei

    background-size: cover;

    Das ist genau das Verhalten von cover: Das Bild wird so angepasst, dass es ohne Verzerrung den Container ausfüllt. Stimmen die Seitenverhältnisse nicht überein, führt das dazu, dass etwas abgeschnitten wird, entweder seitlich oder oben/unten.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!