Skip to content

Instantly share code, notes, and snippets.

@light-traveller

light-traveller/full-page-fixed-bg.html

Last active May 26, 2020 07:05
Show Gist options
  • Save light-traveller/0597015b4e94173dfd4b5de1da9f356d to your computer and use it in GitHub Desktop.
Save light-traveller/0597015b4e94173dfd4b5de1da9f356d to your computer and use it in GitHub Desktop.
Download ZIP
Full page background image (fixed)
Raw
full-page-fixed-bg.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color:#ffcc00" class="my-5">
<div class="container">
<div class="card border-0">
<div class="card-body">
<h4 class="card-title">Sample Content for A Full Page Background Image (Fixed)</h4>
<div class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
</body>
</html>
Raw
style.css
html, body {
height: 100%;
}
body {
background-image: url('http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: rgb(20, 20, 20);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment