@ -3,24 +3,61 @@
< head >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< style >
body, html {
height: 100%;
margin: 0;
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.bg {
background-image: url("/images/white\ logo.png");
height: 100%;
.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/white\ logo.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 = "bg" > < / div >
< div class = "bgimg-1" >
< div class = "caption" >
< span class = "border" > FULL PAGE< / span > < br >
< span class = "border" > BACKGROUND IMAGE< / span >
< / div >
< / div >
< p > Bottom Text< / p >
< 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 >
