Viele Wege führen nach Rom, oder so...
mit media Queries kannst du das auch ganz easy responsive machen. Aber immer dran denken, Hintergrundbilder sind böse! Nicht nur aus SEO-Sicht, da das alt-Tag fehlt, sondern auch für Nutzer mit Sehbehinderungen, die bspw. einen Screenreader einsetzen.
??? Wie funktioniert der Code Editor hier im Forum, so dass er die Tabs bzw. Leerzeichen als Einrückungen behält ???
HTML
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- .container{
- position: absolute;
- margin: auto;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- }
- #demo {
- background:url(http://placehold.it/320x240/E8117F/ffffff&text=Smartphone) no-repeat center center;
- width:320px;
- height:240px;
- }
- @media (min-width: 768px) {
- #demo {
- background:url(http://placehold.it/600x480/aaaaaa/E8117F&text=Tablet) no-repeat center center;
- width:600px;
- height:480px;
- }
- }
- @media (min-width: 992px) {
- #demo {
- background:url(http://placehold.it/800x600/E8117F/ffffff&text=Desktop) no-repeat center center;
- width:800px;
- height:600px;
- }
- }
- @media (min-width: 1200px) {
- #demo {
- background:url(http://placehold.it/1100x825/aaaaaa/E8117F&text=Widescreen) no-repeat center center;
- width:1100px;
- height:825px;
- }
- }
- </style>
- </head>
- <body>
- <div id="demo" class="container"></div>
- </body>
- </html>