Задайте начална точка на фоново изображение в CSS - css, изображение, отзивчив дизайн, преоразмеряване

Кодирам сайт с изображения с пълна ширина катоупражнения и аз се натъкнах на едно интересно нещо: Искам да е толкова отзивчива, колкото може да бъде, така че, разбира се, моите образи ще се променят с промяната на устройството. Но в един образ има една точка, която бих искал запазете като централна точка на преоразмеряването.

Да речем, това е малка къща с близко дървов средата вдясно на изображението и бих искал изображението да се преоразмерява около това, а не в горния ляв ъгъл, което е родната точка на преоразмеряване. Понастоящем изображението ми е зададено като фоново изображение на div и е оразмерено като корица.

Може ли да се направи в CSS, и ако е така, как? Аз нямам много време за това, така че не мисля, че ще използвам JS (това е много малко нещо, но бих искал само да знам, че това е възможно!).

Благодаря !

(Погледнах източник на произход, но не видях как може да отговори на въпроса ми)

Отговори:

Оригинално изображение: https://i.ytimg.com/vi/pd9LAZk9V1c/maxresdefault.jpg

Можете да се възползвате от background-position:center собственост, за да я приведете в центъра. Можете също така да се възползвате от background-size за да регулирате размера на изображението по отношение на контейнера.

.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>