Как исправить положение фонового изображения после увеличения масштаба страницы?

Question

У меня есть div блок со следующими стилями:

.promo-blocks .first-appointment { 
    background-image: url("../images/41d000_e4b9806a75b61053f1d6d4ccab8903df.png_srz_980_345_85_22_0.50_1.20_0 (2).00_png_srz"); 

    position: relative; 
    background-color: #82B440; 
    background-position: left; 
    background-repeat: no-repeat; 
    background-position-x: -97%; 
    background-size: contain; 

} 

Когда я увеличиваю масштаб страницы до 75% или менее, то мой background-image смещено в левую сторону. Как я могу исправить этот фон в позиции left bottom и с постоянным заполнением от центра текста?

Answer 1

Попробуйте это с JQuery на изменения размера событии

$(window).resize(function() { 
    var size = ... 
    $(".promo-blocks .first-appointment").css("background-position-x",size); 
}); 

и рассчитать size коляски на основе некоторой логики, вам нужно

Например

1) держать окна старого размера и принять новый размер в событие изменения размера окна и в соответствии с разностью этих значений установите background-position-x

2) вы можете использовать% отличия экрана ширина и т.д ..

Answer 2

Я думаю, что эта линия:

background-position-x: -97%; 

попробовать без.

может быть также

background-position: left;