CSS Фоновые изображения - Как сделать так, чтобы изображения оставались на месте

Question

Я установил два фоновых изображения на витрине бок о бок. Это выглядит нормально, когда я вижу его в полноэкранном режиме, но когда я изменяю размер экрана, перемещая веб-браузер, изображение слева переходит на изображение справа ... поэтому я хотел бы знать, как чтобы оба изображения двигались одинаково. (означает одинаковое изменение размера изображений, а не левое на правом изображении) Большое спасибо за вашу помощь.

#showcase{
    min-height: 400px;
    background: url("../IMGS/showcase.jpg") left no-repeat, url("../IMGS/showcase2.jpg") right no-repeat;
    padding: 15px;
}

Answer 1

Вы должны добавить / 50% сразу после свойства background-position, которое в данном случае равно left или right для любого из изображений.

вы можете увидеть блок css следующим образом :

#showcase{
    min-height: 400px;
    background: url("../IMGS/showcase.jpg") left / 50% no-repeat, url("../IMGS/showcase2.jpg") right / 50% no-repeat;
    padding: 15px;
}

Вы можете узнать больше и поэкспериментировать со свойством в веб-документации MDN:

https://developer.mozilla.org/en-US/docs/Web/CSS/background

Answer 2

Возможно, вам придется индивидуально стилизовать каждое изображение на «width: 50vw;» это установит, что каждый из них будет занимать 50% порта просмотра независимо от размера окна. Таким образом, каждый из них должен динамически изменяться и настраиваться на один и тот же размер при увеличении или уменьшении окна.