Cześć. Piszę sobie w celach poduczenia się programowania, stronę www. Mam problem z poprawnym pokazywaniem się tła na urządzeniach mobilnych. Jest wstanie ktoś stwierdzić gdzie nawaliłem i jak to poprawić?
body{
background-image: url("tlo.jpg");
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.l{
position: absolute;
top: 50%;
left: 70%;
transform: translate(-50%, -50%);
box-shadow: 0 20px 50px #000;
background: rgb(99, 110, 114, 0.5);
width: 25%;
}
.l:before{
content: '';
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
width: 50%;
text-decoration: none;
}
.r{
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
box-shadow: 0 20px 50px #000;
background: rgb(99, 110, 114, 0.5);
box-shadow: color: none;
width: 25%;
}
.r:before{
content: '';
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
width: 50%;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<a href="/lol/index.php"><img src="lol.png" class="l"></a>
<a href="/csgo/index.html"><img src="csgo.png" class="r"></a>
</body>
</html>