1

Тема: Незрозуміла поведінка фонової картинки

Добрий день.
Намагаюсь спозіціонувати фонове зображення так, щоб воно було на висоту екрана пристрою та закріплене, тобто при прокрутці сторінки завжди залишалася в одному місці.

От тут приклад - https://jsfiddle.net/98nym4go/
HTML

<div class="bgpic"></div>

CSS

.bgpic{
    width:50%;
    height:500px;
    padding:12px;
    background:url("https://cdn.fishki.net/upload/post/201405/15/1269354/b77b342f6cf33f5d7c12aa1b8ef22dc6.jpg") no-repeat;
    background-position:top left;
    background-size:auto 100vh;
    //background-attachment:fixed;
    border:1px solid red;
}

Проблема в тому, що як тільки я встановлюю "background-attachment:fixed" фонова картинка чомусь не відображається, а без цього тега вона не закріпляється.

Що не так?

2

Re: Незрозуміла поведінка фонової картинки

Так хотів спростити що трохи не те зробив.

Ось переробив приклад - https://jsfiddle.net/98nym4go/1/

Діло в тому, що коли фонова картинка вирівнюється по правому краю вона виходить за межі області де розміщена. В прикладі картинка відображається на половину (по ширині). Тобто вона приклеюється до краю екрана а не краю блоку в якому розміщена.

3

Re: Незрозуміла поведінка фонової картинки

не до кінця зроз, шо саме то має бути, але спробуйте

    background-size: cover;
Подякували: leofun011