Search code examples
htmlcssbackgroundbackground-imageparallax

Parallax background has white borders on the side


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>&#9776;</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;
  }

Solution

  • please check this below link, i tested in codepen
    

    https://codepen.io/kapil00/pen/jOPQrpg