Pozycjonowanie elementów względem backgroundu

pytanie zadane 24 marca 2020 w HTML i CSS przez Stairs Nowicjusz (200 p.)

Witam, mam problem z pozycjonowaniem elementów względem background-image. Chciałbym żeby to wyglądało tak (zdjęcie nie musi być takie same), ale nie jestem w stanie odpowiednio ustawić strzałki w kółko względem tła. Za każdym razem gdy piszę przykładowo margin-top: 10vh to element przesuwa się wraz z backgroundem

3 odpowiedzi

odpowiedź 25 marca 2020 przez Kasia C Obywatel (1,560 p.)

odpowiedź 25 marca 2020 przez frostify Mądrala (5,640 p.)

Jeżeli chcesz, żeby strzałka była w kółku, stwórz oddzielnie background dla danej strzałki i dodaj do tego elementu border-radius 100%, nie tykając obrazka ustawionego jako tło.

Dopasowywanie elementu (tutaj strzałki) do jakiejś części tła to bardzo zły pomysł i wręcz niemożliwe, by poprawnie później to dopasować do urządzeń mobilnych na przykład.

Poza tym, 10vh to 10 procent wysokości viewportu, czyli w zależności od tego, jaką kto ma rozdzielczość ekranu, strzałka będzie w innym miejscu. W zamian możesz użyć po prostu pikseli.

Podaj kod, a będzie łatwiej pomóc.

odpowiedź 25 marca 2020 przez Stairs Nowicjusz (200 p.)

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">&larr;</a></div>

                </div>
                <div class="title"><h1>Oświęcim</h1></div>

            </div>

        </div>


    </body>

</html>