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

2 years ago
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
2 years ago
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
2 years ago
}
2 years ago
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: 0.65;
2 years ago
background-position: center;
background-repeat: no-repeat;
background-size: cover;
2 years ago
}
.bgimg-1 {
2 years ago
background-image: url("/images/blacklogo.pngs");
2 years 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;
2 years ago
}
</style>
</head>
<body>
2 years ago
<div class="bgimg-1">
<div class="caption">
<span class="border">FULL PAGE</span><br>
<span class="border">BACKGROUND IMAGE</span>
</div>
</div>
2 years ago
2 years 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>
2 years ago
</body>
</html>