Как сделать адаптивным фон страницы?

Question

[SemenyukS]

Как в данном случае правильно задать параметры фону страницы, чтобы он :
- нормально отображался на больших мониторах ; на скриншоте видно, как браузер его обрезает.
- когда немного уменьшаю размер монитора в пределах разрешения медиа-запроса - картинка уходит, оставляя элементы за свои рамки ?

Подскажите, пожалуйста, что надо сделать ? Вот код :

header {
    background: url(../img/header_bg.jpg) no-repeat center center;
    background-size: 100%;
    height: 100%;
    background-position-y: -100px;
}

- Вот как должно быть :


- Это разрешение 1920:1200


- Это немного уменьшенное разрешение, чем оригинальное


Спасибо за советы !

Answer 1

[Сергей delphinpro]

background-size:cover
+ (опционально) разные картинки посредством медиа-запросов, если на определенных размерах выглядит совсем уж ужасно.

Comments

[Сергей]

Верно, многие сайты используют несколько разных картинок с одинаковым изображением, причём, иногда изображение даётся не целиком, а частично. Например, в нашем случае, можно давать на маленьких экранах файл с "куском" картинки с воздушным шаром.

Answer 2

[Hy_ok]

попробуй сделать просто картинкой, и сделай ей width:100%; если хочешь что бы она ни что не перекрывала position:absolute; поставь ее в конец div-а