Почему картинка выходит за пределы body при уменьшении экрана?

Question

[TheFlappy]

<div class="container">
            <div class="background">
                <div id="s1"></div>
                <div id="s2"></div>
                <div id="gift1"></div>
                <div id="gift2"></div>
            </div>
            <div class="block1">
                <h1>Дарим подарки</h1>
                <h3>за ваши покупки</h3>
            </div>
    </div>

.background {
    pointer-events: none;
}

#s1 {
    background: url(img1) 50% 50% no-repeat;
    position: absolute;
    left: calc(50% - 950px);
    top: -150px;
    width: 1000px;
    height: 1000px;
    z-index: 1;
}

#s2 {
    background: url(img2) 50% 50% no-repeat;
    position: absolute;
    left: calc(50% - 100px);
    top: 200px;
    width: 1000px;
    height: 1000px;
    z-index: 1;
    overflow:hidden;
}

#gift1 {
    pointer-events: none;
    background: url(img3);
    position: absolute;
    left: calc(50% - 720px);
    margin-top: -40px;
    width: 515px;
    height: 385px;
    z-index: 2; 
}

#gift2 {
    pointer-events: none;
    background: url(img4) 50% 50% no-repeat;
    position: absolute;
    left: calc(50% + 20px);
    top: 450px;
    width: 650px;
    height: 475px;
    z-index: 2; 
    overflow:hidden;
}

Answer 1

[iBird Rose]

задай родителю overflow: hidden;

Comments

[TheFlappy]

#s2 {
overflow:hidden;
}

#gift2 {
overflow:hidden;
}
Прописано, но не работает

[Aetae]

TheFlappy, очевидно, что overflow надо задавать для "коробки" в которой вся эта тряхомудия лежит, а не самим картинкам, т.е. для
.background или для .container, при этом, естественно, задав им ширину (100%?).

Также рекомендую забыть про overflow: hidden и использовать всегда overflow: clip, коме тех случаев, когда специфическое поведение hidden действительно нужно.

[ProjectSoft]

TheFlappy, какой к чёрту оверфлоф к бакгроунду!!!
Задай пропорции для блока через ratio.
background-size cover или contain. Размер блока по ширине 100%

Answer 2

[Сергей delphinpro]

значит нужно их позиционировать от правого края, а не от левого
вроде такого: right: 30%

Comments

[TheFlappy]

Всё та же проблема

Answer 3

[rootnoroot]

у вас отступ справа откуда взялся?
с версткой что то не то
задайте overflow-x:hidden для body