Ustaw punkt początkowy na obraz w tle w CSS - css, image, responsive-design, resize

Koduję witrynę z obrazami o pełnej szerokości jakoćwiczę, a ja „natknąłem się na interesującą rzecz: chcę, żeby była tak responsywna, jak to tylko możliwe, więc oczywiście moje obrazy zmienią rozmiar wraz ze zmianą urządzenia. Ale na jednym obrazie jest punkt, zachowaj jako centralny punkt zmiany rozmiaru.

Powiedzmy, że jest to mały dom z pobliskim drzewemw środkowej prawej części obrazu i chciałbym, aby obraz zmienił rozmiar wokół tego, a nie w lewym górnym rogu, który jest rodzimym punktem zmiany rozmiaru. Mój obraz jest obecnie ustawiony jako obraz tła div i ma rozmiar okładki.

Czy można to zrobić w CSS, a jeśli tak, to w jaki sposób? Nie mam na to dużo czasu, więc nie sądzę, że użyję JS (jest to bardzo drobna rzecz, ale chciałbym to wiedzieć, że jest to możliwe!).

Dzięki !

(„Spojrzałem na pochodzenie tła, ale nie widziałem, jak mogłoby to odpowiedzieć na moje pytanie)

Odpowiedzi:

Oryginalny obraz: https://i.ytimg.com/vi/pd9LAZk9V1c/maxresdefault.jpg

Możesz skorzystać z background-position:center właściwość wyrównywania do środka. Możesz także skorzystać background-size aby dostosować rozmiar obrazu względem pojemnika.

.bg {
background: url("https://i.ytimg.com/vi/pd9LAZk9V1c/maxresdefault.jpg");
background-repeat: no-repeat;
width: 500px;
height: 500px;
background-position: center;
}

.bg2 {
background: url("https://i.ytimg.com/vi/pd9LAZk9V1c/maxresdefault.jpg");
background-repeat: no-repeat;
width: 500px;
height: 500px;
background-position: -20px 60px; /* Xvalue Yvalue */
}

<div class="bg"></div>
<br>
<br>
<div class="bg2"></div>