Media Queries und Bilder

Mittwoch, 25. Januar 2012 Thema: Gecodet

Nur für die Akten, eine Art, unterschiedlich große Bilder in den Content zu bekommen…

<!DOCTYPE html>
  <html>
    <head>
      <title>H1 Test</title>
      <style type="text/css">
        body { min-height: 500px; }
        @media screen and (min-width: 680px) and (max-width: 1024px) {
          h1::before {
            content: url('img/freude\_680.jpg');
            display: block;
          }
        }
        @media screen and (min-width: 1024px) {
          h1::before {
            content: url('img/freude.jpg');
            display: block;
          }
        }
      </style>
    </head>
  <body>
    <h1>Meine tolle H1</h1>
    <p>Lebowski ipsum vee vant zat money, Lebowski. Dolor sit amet, consectetur adipiscing elit praesent ac magna justo. I did not watch my buddies die face down in the mud so that this fucking strumpet. Pellentesque ac lectus quis elit blandit fringilla a ut turpis. Praesent felis ligula, malesuada suscipit malesuada non, ultrices non urna. It's a complicated case, Maude. Lotta ins. Lotta outs. And a lotta strands to keep in my head, man.</p>
  </body>
</html>

Getestet gerade nur in Chrome. Kommt von hier.

Noch keine Kommentare.

Hinweis: Zur Zeit ist die Kommentarfunktion leider deaktiviert.