если подключаю url в css напрямую, то картинка ведёт себя, как нужно. Если создать тег img и там написать url и потом прописать свойства через bg_fon img, то картинка ведёт себя странно, не растягивается на весь экран и сжимается странно. В первом примере работает странно, во втором примере работает, как нужно. Не понимаю, как можно сделать чтобы в первом примере работала также, как и во втором.
.bg_fon{
position: absolute;
top:0px;
width: 100%;
height: 793px;
background-size: cover;
background-position: right;
[![введите сюда описание изображения][1]][1]
}
@media (max-width:500px) {
.bg_fon {
background-position: left;
/* opacity: 0.5; */
}
<div class="bg_fon"><img src="https://sun9-88.userapi.com/impf/XDJxO5SXF6b8TbJf4_HKsjYK44cuA-6Z34l9Jg/2_imjOMQd9I.jpg?size=1440x793&quality=95&sign=11d5d1b733a9253908721965b71573d4&type=album"></div>
.bg_fon{
position: absolute;
top:0px;
width: 100%;
height: 793px;
background: url("https://sun9-88.userapi.com/impf/XDJxO5SXF6b8TbJf4_HKsjYK44cuA-6Z34l9Jg/2_imjOMQd9I.jpg?size=1440x793&quality=95&sign=11d5d1b733a9253908721965b71573d4&type=album") no-repeat;
background-size: cover;
background-position: right;
}
@media (max-width:500px) {
.bg_fon {
background-position: left;
/* opacity: 0.5; */
}
}
<div class="bg_fon"></div>