You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
WTFxUS/index.html

63 lines
1.2 KiB

1 year ago
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
1 year ago
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
1 year ago
}
1 year ago
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: 0.65;
1 year ago
background-position: center;
background-repeat: no-repeat;
background-size: cover;
1 year ago
}
.bgimg-1 {
1 year ago
background-image: url("/images/blacklogo.png");
1 year ago
height: 100%;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
1 year ago
}
</style>
</head>
<body>
1 year ago
<div class="bgimg-1">
<div class="caption">
<span class="border">FULL PAGE</span><br>
<span class="border">BACKGROUND IMAGE</span>
</div>
</div>
1 year ago
1 year ago
<p style="padding:5px 15px">This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>
1 year ago
</body>
</html>