Мы пытаемся добавить фон параллакса на наш сайт, но у него раздражающая белая рамка вокруг изображения (https://imgur.com/a/BGS5QvH).
Мы перепробовали все и не знаем, что делать. Мы не смогли найти проблему с CSS или HTML. Мы думаем, что это проблема с полями, но нет ничего, что могло бы повлиять на это.
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;
}