Beispiel:Background-size.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <title>background-size</title> <style> .contain { background-size: contain; } .cover { background-size: cover; } .eins { background-size: 50px;} .zwei { background-size: auto 100px;} .drei { background-size: 50%; } .vier { background-size: 50% 100%; }
figure { background-color: gray; background-image: url("https://wiki.selfhtml.org/images/b/b9/Burg-in-N%C3%BCrnberg-2.jpg"); background-position: center; background-repeat: no-repeat; border: thin solid; display: inline-block; height: 12em; margin: 1em 1em 0; text-align: center; width: clamp(18em, 45%, 35em); } figcaption { background: white; border: thin solid; display: inline-block; margin-top: 10.5em; padding: 0 .5em; } </style> </head> <body>
Hintergrundbilder mit background-size skalieren
<figure class="contain"><figcaption>contain</figcaption></figure> <figure class="cover"><figcaption>cover</figcaption></figure>
<figure class="eins"><figcaption>50px</figcaption></figure> <figure class="zwei"><figcaption>auto 100px</figcaption></figure> <figure class="drei"><figcaption>50%</figcaption></figure> <figure class="vier"><figcaption>50% 100%</figcaption></figure>
</body> </html>
