lily/WTFxUS
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

test

Browse source
This commit is contained in:
max 2023-02-02 04:34:30 +00:00
parent 24b8822c9a
commit 20aba3b53a
1 changed files with 45 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
index.html
View file

@ -3,24 +3,61 @@
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style> <style>
body, html { body, html {
height: 100%; height: 100%;
margin: 0; margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
} }
.bg {
background-image: url("/images/white\ logo.png"); .bgimg-1, .bgimg-2, .bgimg-3 {
height: 100%; position: relative;
opacity: 0.65;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; 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> </style>
</head> </head>
<body> <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> </body>
</html> </html>