After implementing the code to create a full-screen background image on my site, I noticed that the image is being shrunk up slightly. It seems to be cutting off about an inch from each side, which is not what I intended.
The code I used is directly from CSS tricks:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Below is the complete CSS code I am using:
* {margin: 0; padding: 0;}
/* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */
html {
background: url('/images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
#thanks {
position: absolute;
width: 300px;
height: 75px;
z-index: 15;
top: 98%;
left: 50%;
margin: -100px 0 0 -150px;
text-decoration: none;
text-align: center;
font-size: 36px;
background-color: #3a1e49;
color: #edcd05 !important;
font-family: "Times New Roman", Times, serif;
border-radius: 25px;
}
#thanks:hover {
background-color: #edcd05;
color: #3a1e49;
}
#thanks a {
color: #edcd05;
text-decoration: none;
position: relative;
bottom: 10%;
}
#thanks a:hover {
color: #3a1e49;
}
Here is the HTML content:
<!DOCTYPE html>
<html class="full" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Demo</title>
<link href="css/full.css" rel="stylesheet">
</head>
<body>
<!--
<div id="thanks">
<p><a href="thanks.php">Share a Memory</a></p>
</div>
-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>