Zitat:
Zitat von Manfred62
hier eine Demo mit der letzten Methode:
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Fotos 2014 </title>
<style type="text/css">
* {
border: 0;
margin: 0;
padding: 0;
}
html, body, #global, #page {
height: 100%;
width: 100%;
}
body {
font: 100%/1.6 sans-serif;
color: #FFF;
background: #000 url(bg.jpg) center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#global {
background-color: rgba(0, 0, 0, 0.5);
}
#page {
position: relative;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
font-weight: normal;
background: #000;
padding: 20px 50px;
}
</style>
</head>
<body>
<div id="bg"></div>
<div id="global">
<div id="page">
<h1>Fotos 2014</h1>
</div>
</div>
</body>
</html>
|
Hallo Manfred
viel herzlichen Dank für das Beispiel und die Links!
Die Demo ist genau das, was ich gesucht habe.
Auch die Methode im ersten Link ist klasse.
Vielen vielen Dank!