Responsive Web Design

[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