Rolf B: CSS: Dehnung des Hintergrundbildes bei großem Viewport begrenzen

Beitrag lesen

SELF-Forum

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