Hans: CSS: Dehnung des Hintergrundbildes bei großem Viewport begrenzen

SELF-Forum

CSS: Dehnung des Hintergrundbildes bei großem Viewport begrenzen

Hans (Versionen)
– Informationen zu den Bewertungsregeln

Hallo Leute,

wie kann ich mittels CSS einstellen, dass mein Hintergrund ab einer bestimmten Auflösung nicht in die Breite gezogen wird, sondern unverändert bleibt? Das sieht grausig aus, sobald man einen zu breiten Monitor hat.

Hier ein Auszug aus meinem Code:

<div style="opacity: 1;margin-left:0%;margin-top:1%;width:100%;height:100%;background-color:grey;
background-image:url(test.jpg);
          background-repeat:no-repeat;
          background-position:center;
          //background-attachment: fixed;

Danke für einen Tipp!

Gruß Hans

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS: Dehnung des Hintergrundbildes bei großem Viewport begrenzen

    Matthias Scharwies
    – Informationen zu den Bewertungsregeln

    Servus!

    Hallo Leute,

    wie kann ich mittels CSS einstellen, dass mein Hintergrund ab einer bestimmten Auflösung nicht in die Breite gezogen wird, sondern unverändert bleibt? Das sieht grausig aus, sobald man einen zu breiten Monitor hat.

    Hier ein Auszug aus meinem Code:

    <div style="opacity: 1;margin-left:0%;margin-top:1%;width:100%;height:100%;background-color:grey; background-image:url(test.jpg); background-repeat:no-repeat; background-position:center; //background-attachment: fixed;

    Danke für einen Tipp!

    CSS/Eigenschaften/max-width

    body {
  max-width: 60 em;
  margin: 1em auto;
}

    Herzliche Grüße

    Matthias Scharwies

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. CSS: Dehnung des Hintergrundbildes bei großem Viewport begrenzen

    Rolf B
    – Informationen zu den Bewertungsregeln

    Hallo Hans,

    1. ich habe deinen Code formatiert. Mehrzeilige Codebeispiele sollte man nicht in Backticks ` setzen, sondern mit einem ~~~ davor und dahinter markieren.

    Hinter dem einleitenden ~~~ kann man noch die verwendete Sprache notieren, also z.B. ~~~html

    2. Es ist nicht so geschickt, solche Style-Mengen in ein style-Attribut zu packen. Es sollte eigentlich immer möglich sein, dafür ein Stylesheet zu erstellen. Gib dem div eine ID, bspw id="testbild" und schreibe in einer CSS Datei oder in einem <style> Element im <head> der HTML Seite

    #testbild {
   opacity: 1;
   margin-left: 0%;
   margin-top: 1%;
   width: 100%;
   height: 100%;
   background-color: grey;
   background-image: url(test.jpg);
   background-repeat:no-repeat;
   background-position:center;
   //background-attachment: fixed;
}

    3. ist // kein gültiger CSS Kommentar. In CSS verwendet man die "klassischen" C-Kommentare, also /* und */

    #testbild {
   opacity: 1;
   /* background-attachment: fixed; */
}
    1. Es gibt keinen direkten Weg, die Größe eines background-image zu limitieren. Du kannst die Größe des background-image mit absoluten Werten angeben, oder Du kannst es relativ zu seiner Containergröße tun.

    Die von Matthias genannte max-width Angabe limitiert die Breite des kompletten Containers. Das kann deinen Wünschen entgegenkommen, muss aber nicht.

    Weshalb willst Du die Breite limitieren? Damit die Höhe nicht zu groß wird? Dann schau Dir background-size:contain an.

    Rolf

    --
    sumpsi - posui - obstruxi
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS: Dehnung des Hintergrundbildes bei großem Viewport begrenzen

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Rolf B

      1. ich habe deinen Code formatiert. Mehrzeilige Codebeispiele sollte man nicht in Backticks ` setzen, sondern mit einem ~~~ davor und dahinter markieren.

      Was spricht gegen ```? 😏

      🖖 Живіть довго і процвітайте

      --
      When the power of love overcomes the love of power the world will know peace.
      — Jimi Hendrix
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. CSS: Dehnung des Hintergrundbildes bei großem Viewport begrenzen

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Rolf B

      1. Es gibt keinen direkten Weg, die Größe eines background-image zu limitieren.

      background-size scheint mir ziemlich direkt zu sein.

      🖖 Живіть довго і процвітайте

      --
      When the power of love overcomes the love of power the world will know peace.
      — Jimi Hendrix
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. CSS: Dehnung des Hintergrundbildes bei großem Viewport begrenzen

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Hans

    wie kann ich mittels CSS einstellen, dass mein Hintergrund ab einer bestimmten Auflösung nicht in die Breite gezogen wird, sondern unverändert bleibt?

    Eventuell mit Beschränkung per min()-Funktion. ☞ Beispiel

    Das sieht grausig aus, sobald man einen zu breiten Monitor hat.

    Was genau heißt „grausig“? Hast du irgendwas gemacht, dass das Seitenverhältnis nicht erhalten bleibt?

    Hier ein Auszug aus meinem Code:

    Dein gezeigter Auszug lässt kaum darauf schließen, wie das aussehen soll. Soll das Hintergrundbild abgeschnitten werden, wenn es nicht in den Viewport passt? Oder soll es auf jeden Fall ganz zu sehen sein? In Höhe und Breite oder nur in einem davon?

    🖖 Живіть довго і процвітайте

    --
    When the power of love overcomes the love of power the world will know peace.
    — Jimi Hendrix
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS: Dehnung des Hintergrundbildes bei großem Viewport begrenzen

      Hans
      – Informationen zu den Bewertungsregeln

      Hey Leute,

      danke für eure Tipps, habe es jetzt hinbekommen :)

      Gruß Hans

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln