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