Beispiel:CSS2 background-position.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" /> <title>background-position</title> <style> div { width: 300px; height: 300px; border: 1px solid; display: inline-block; margin: 0 20px 20px 0; text-align: center; vertical-align: bottom; background-image: url("https://wiki.selfhtml.org/images/2/21/Burg.svg"); background-color: #dddddd; background-repeat: no-repeat; } .caption { background: white; border: 1px solid; padding: 0 3px; display: inline-block; margin-top: 270px; } #eins {background-position: center;} #zwei {background-position: -50px 100px;} #drei {background-position: right bottom;} #vier {background-position: left -50px bottom 100px;} </style> </head> <body>
background-position
<main>
</main> </body> </html>