We're trying to add a parallax background to our website, but it has an annoying white border around the image (https://i.sstatic.net/pt0Pf.jpg).
We've tried everything and don't know what to do. We couldn't find an issue with the CSS or HTML. We're thinking it's an issue with margins but there isn't anything that could be affecting it.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet"><!-- <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet"> -->
<link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<title>
</title>
</head>
<body>
<div class="sidenav" id="sideNav">
</div>
<section class="background headpage">
<div class="container">
<h1>T K S - F O U N D A T I O N S</h1>
</div>
</section>
<div onclick="openNav()" style="font-size:30px;cursor:pointer">
<h2>☰</h2>
</div>
<script>
function openNav() {
document.getElementById("sideNav").style.width = "250px";
}
function closeNav() {
document.getElementById("sideNav").style.width = "0";
}
</script>
</body>
</html>
CSS:
html {
height: 100%;
}
body {
font-family: "Lato";
height: 100%;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(49, 49, 49);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #38afff;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.background {
position: relative;
}
.background .container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.background .container h1 {
color: #FFF;
font-size: 3em;
text-align: center;
font-family: "Lato";
}
.background .container h2 {
color: #FFF;
font-size: 3em;
line-height: 105%;
margin-bottom: 0;
text-align: center;
}
h2 {
position: absolute;
top: -10px;
left: 30px;
color: #FFF;
}
.headpage {
height: 100%;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: table;
background: linear-gradient( to bottom, rgba(0, 0, 0, 0.212), rgb(0, 0, 0)), url('https://i.imgur.com/0KzSXdk.jpeg');
position: absolute;
}
please check this below link, i tested in codepen