Beispiel:CSS2 background-position.html
Aus SELFHTML-Wiki
<!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("//wiki.selfhtml.org/mediawiki/images/2/26/Background.png");
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>
<h1>background-position</h1>
<main>
<div id="eins"><span class="caption">center center</span></div>
<div id="zwei"><span class="caption">-50px 100px</span></div>
<div id="drei"><span class="caption">right bottom</span></div>
<div id="vier"><span class="caption">left -50px bottom 100px</span></div>
</main>
</body>
</html>
