CSS: Dehnung des Hintergrundbildes bei großem Viewport begrenzen
Hans
- css
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
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!
body {
max-width: 60 em;
margin: 1em auto;
}
Herzliche Grüße
Matthias Scharwies
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; */
}
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
@@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 ```
? 😏
🖖 Живіть довго і процвітайте
@@Rolf B
- Es gibt keinen direkten Weg, die Größe eines background-image zu limitieren.
background-size
scheint mir ziemlich direkt zu sein.
🖖 Живіть довго і процвітайте
@@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?
🖖 Живіть довго і процвітайте
Hey Leute,
danke für eure Tipps, habe es jetzt hinbekommen :)
Gruß Hans