Media Queries und Bilder

Thema:

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.

Datenschutzhinweis

Daten die in dieses Formular eingegeben werden, werden mit Hilfe des Dienstes welcomments.io verarbeitet. Dabei fallen die in der Datenschutzerklärung dieses Dienstes aufgeführten Daten (IP-Adresse, Browserversion) an, die dort auch gespeichert werden. Gebe keine persönlichen Daten in dieses Formular ein, im Zweifelsfall nutze einen Spitznamen, alles eingegebene wird hier öffentlich angezeigt. Es werden keine Cookies gespeichert, lediglich der Kommentartext wird im Localstorage des Browsers zwischengespeichert.

GitHub-flavored Markdown und einfache HTML-Tags werden unterstützt.

Hinweis…

Diese Seite enthält Videos von Youtube. Diese sind standardmäßig deaktiviert. Falls Du unten auf „Ja“ klickst, werden Daten von Youtube auf Deinen Rechner geladen und so mindestens Deine IP-Adresse an Youtube weiter gegeben. Cookies werden nicht verwendet. Mehr Infos.

Möchtest du Youtube auf dieser Seite aktivieren?