Responsive Web Design

[Gerdi]

Hallo,

ich habe drei Bilder als Hintergrundbilder definiert. Wie kann ich erreichen, dass sich diese in der Größe an sich ändernde Screengrößen anpassen?

  
body  
{  
    background-image: url(bild1.png), url(bild2.png), url(bild3.png);  
    background-position: 0px 0px, 240px 0px, 240px 50px;  
    background-repeat: repeat-y, repeat-x, no-repeat;  
}  

Schöne Grüße
Gerdi

[Jörg Reinholz]

Moin!

ich habe drei Bilder als Hintergrundbilder definiert. Wie kann ich erreichen, dass sich diese in der Größe an sich ändernde Screengrößen anpassen?

Wenn Die nach dem Lesen der in den Suchmaschinen zu dem von Die selbst genannten Titeln

z.B.
http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries

nichts einfällt, solltest Du einfach mal versuchen, Dein Ansinnen detailliert und strukturiert in Worte zu fassen - und dann daraus das CSS zu stricken.

wie wäre es mit:

Wenn das Medium ein Bildschirm und der Viewport maximal 524px breit ist, dann:
    - Hintergundbild 1   =
    - dessen Position von oben  =
    - dessen Position von links =
    ...

Wenn das Medium ein Bildschirm und der Viewport maximal 960px breit ist, dann:
    - Hintergundbild 1   =
    - dessen Position von oben  =
    - dessen Position von links =
    ...

Im CSS:

@media screen and (max-width: 960px) {  
    body {  
           background-image: url(bild1.png), url(bild2.png), url(bild3.png);  
           background-position: 0px 0px, 240px 0px, 240px 50px;  
           background-repeat: repeat-y, repeat-x, no-repeat;  
    }  
}  
@media screen and (max-width: 524px) {  
    body {  
           background-image: url(bild1a.png), url(bild2a.png), url(bild3a.png);  
           background-position: 0px 0px, 130px 0px, 130px 30px;  
           background-repeat: repeat-y, repeat-x, no-repeat;  
    }  
}

...

vergiss auch nicht:

  
<meta name="viewport" content="width=device-width; initial-scale=1.0">  

im html-header sonst versuchen diverse Mobilbrowser die Seite zu skalieren, was sich dann als kontraproduktiv erweisen würde.

Jörg Reinholz

[Gerdi]

Moin!

ich habe drei Bilder als Hintergrundbilder definiert. Wie kann ich erreichen, dass sich diese in der Größe an sich ändernde Screengrößen anpassen?

Wenn das Medium ein Bildschirm und der Viewport maximal 524px breit ist, dann:
    - Hintergundbild 1   =

......

Wenn das Medium ein Bildschirm und der Viewport maximal 960px breit ist, dann:

......>     ...

Das oben sind Sprünge in der Größe, aber das Problem existiert doch schon, wenn man das Fenster schrittweise durch Verchieben des Randes verkleinert. Demnach müsste man ja noch viel mehr derartige Medium-Angaben machen?

[Jörg Reinholz]

Das oben sind Sprünge in der Größe, aber das Problem existiert doch schon, wenn man das Fenster schrittweise durch Verchieben des Randes verkleinert. Demnach müsste man ja noch viel mehr derartige Medium-Angaben machen?

Wieso? Dass die Hintergrundbilder beim Vergößern oder Verkleinern des Browserfensters ihre Größe behalten ist das, was die Benutzer gewöhnt sind.

Freilich kannst Du auch die Background-size Eigenschaft verändern, wie Gunnar es empfahl - das geht auch relativ zum umgebenden Element (hier: dem Body) Allerdings kann das dazu führen, dass der Browser u.U. eine bedenkliche Bildqualität zeigt und/oder dass Du für kleine Bildschirme/Browserfenster zu viele Daten auslieferst.

Dann kommen wieder solche Fragen.

Deswegen ist auch bei einer relativen Angabe der Größe eine gute Idee, verschieden große Hintergründe mit der von mir gezeigten Methode bereit zu stellen.

Jörg Reinholz

[Matthias Apsel]

Om nah hoo pez nyeetz, Jörg Reinholz!

Freilich kannst Du auch die Background-size Eigenschaft verändern,

Warum sollte diese Eigenschaft verändert werden? scnr. Sie hat übrigens auch ihren Platz in unserem Wiki.

Deswegen ist auch bei einer relativen Angabe der Größe eine gute Idee, verschieden große Hintergründe mit der von mir gezeigten Methode bereit zu stellen.

ack, zudem man u.U. deutlich unterschiedliche Layouts für verschiedene visuelle Ausgabemedien haben möchte.

Matthias

[Gunnar Bittersmann]

@@Jörg Reinholz:

nuqneH

Allerdings kann das dazu führen, dass der Browser u.U. eine bedenkliche Bildqualität zeigt und/oder dass Du für kleine Bildschirme/Browserfenster zu viele Daten auslieferst.

Retina revolution.

Qapla'

[Gunnar Bittersmann]

@@Gerdi:

nuqneH

ich habe drei Bilder als Hintergrundbilder definiert. Wie kann ich erreichen, dass sich diese in der Größe an sich ändernde Screengrößen anpassen?

Mit der background-size-Eigenschaft.

Qapla'

[Christian Kruse]

Moin Gunnar,

ich habe drei Bilder als Hintergrundbilder definiert. Wie kann ich erreichen, dass sich diese in der Größe an sich ändernde Screengrößen anpassen?

Mit der background-size-Eigenschaft.

Uh, nice, kannte ich noch gar nicht.

LG,
 CK

[Gunnar Bittersmann]

@@Christian Kruse:

nuqneH

Mit der background-size-Eigenschaft.
Uh, nice, kannte ich noch gar nicht.

Gibt’s ja auch noch nicht so lange. ;-)

Qapla'

[Christian Kruse]

Moin Gunnar,

Mit der background-size-Eigenschaft.
Uh, nice, kannte ich noch gar nicht.

Gibt’s ja auch noch nicht so lange. ;-)

Hehe, ein Tor wer glaubt, er wisse alles :-)

LG,
 CK

[Tabellenkalk]

Hallo,

Hehe, ein Tor wer glaubt, er wisse alles :-)

Einer der nichts weiß, und weiß, dass er nichts weiß, weiß mehr als einer, der nichts weiß und nicht weiß, dass er nichts weiß.

Gruß
Kalk