Как грамотно вписать фон в header?
Изучал верстку и наткнулся на проблему. Естть <header>, и нужно залить его фоном (2000x1034 пикселей). Как правильно задать размер шапки и background для него, чтобы на разных мониторах подстраивался размер?
Ответы (1 шт):
Чтобы размер элемента подстраивался под экран следует указывать его ширину в % и высоту в vh(высота экрана, 100vh соответствует высоте равную высоте экрана пользователя). Например, для того, чтобы элемент занимал всю ширину и высоту экрана пользователя не зависимо от разрешения, следует прописать для такого элемента следующие значения: width:100%; height: 100vh;.
Фон для элемента можно задать с помощью свойства background-image: url(здесь пишем адрес картинки которая нам нужна) для того, чтобы картинка занимала весь элемент следует прописать свойство background-size: contain.
Если у вас изображение не должно занимать полностью весь элемент, но вам нужно ее расположить, скажем по центру, для этого, следует сначала убрать свойство background-size: contain и отрегулировать положение изображения в свойстве bzckground-position: center, в данном случае изображение будет располагаться по центру элемента.
Также, если хотите лучше контролировать поведение элементов на странице при разном разрешении экрана можно это сделать при помощи:
@media (max-width:700px) and (min-width:481px){
body{
background-color: #000;
}
/* ещё какие-то стили... */
}
В этом случае будут применены стили, которые находятся внутри @media, только тогда, когда ширина экрана больше 481px и меньше 700px. Если надо задать только одну границу(например для любой ширины экрана от 480px и меньше, то это можно сделать так:
@media (max-width:480px){
body{
background-color: #000;
}
/* ещё какие-то стили... */
}