Mój kod wygląda tak, ale mam teraz jeszcze jeden problem konkretnie z oppacity. Gdy ustawiam oppacity na background to zmienia mi się w całym divie. Czytałem że da się to rozwiązać position: absolute i position: relative, ale nie działa mi coś
EDIT: Zdjęcie jest przykładowe z internetu
CSS:
body{
font-family: 'Nunito Sans', sans-serif;
background-color: whitesmoke;
}
.background{
background-image: url(https://lh3.googleusercontent.com/proxy/410WE0xZqQHNV0zeIf9yBrtYRvJ217ZXGwOtaY47lLMgT5xUfrrT1A38WQNcDtn82h3-FfU20oi3W_vdr28sDjJ3kRDIX2TnLSNITRSHOd82);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding-top: 1vh;
opacity: 0.5;
}
.circle {
background: white;
border-radius: 50px;
width: 60px;
height: 60px;
margin-right: 68vw;
margin-top: 1vh;
margin-left: 1vw;
opacity: 1;
}
.arrow{
color: grey;
font-size: 40px;
text-shadow: none;
text-align: center;
opacity: 1;
}
.title{
text-align: center;
color: black;
font-size: 2vw;
margin-top: 20vh;
font-stretch: ultra-expanded;
color: white; text-shadow: black 0.1em 0.1em 0.2em;
}
a{
text-decoration: none;
color: grey;
}
HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="../css/style_oswiecim1.css">
<script>
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,800&display=swap');
</script>
</head>
<body>
<div id="container">
<div class="background">
<div class="circle">
<div class="arrow"><a href="Main_menu.html">←</a></div>
</div>
<div class="title"><h1>Oświęcim</h1></div>
</div>
</div>
</body>
</html>