Вопрос по верстке из psd?

Всем привет. Ребята, помогите разобраться, как мне растянуть все мои background'ы? Полная ширина макета 1024px, задаю эту ширину и вот что получаю.e0dfd532fead45769ed3c02b240347e4.jpg

Вот разметка и стили, которые применил: jsfiddle.net/Frontend_Oleg/6uwp82Lw
  • Вопрос задан
  • 989 просмотров
Пригласить эксперта
Ответы на вопрос 8
w999d
@w999d
Web-developer
background-size: cover;
навешивать на body/html либо на растянутый на всю высоту контейнер

текст на фоне лучше отдельной картинкой с прозрачным фоном сделать, чтобы не обрезался
Ответ написан
Комментировать
@raiboon
Никак. Бейте дизайнера по голове, пока не научится думать, как его "рисуночек" будет выглядеть на экране.
Конкретно с этой шапкой ничего сделать нельзя.
Либо её перерисовать для разной ширины экрана - вплоть до 4096px -и подсовывать нужную с media_queries.
Либо пусть дизайнер думает, как свести эту картиночку к повторяющемуся или однородному фону по краям.
Ответ написан
проще всего разделить на 2 части - текст отдельно, фон отдельно . фону заверстать background-size:cover , а текст как есть. вроде все должно более менее смотреться
Ответ написан
Комментировать
Olejan
@Olejan Автор вопроса
ну вот да, именно вот с этой частью и проблемы, т.к. если задаю ей background: cover, то блок растягивается и выглядит вообще не о чем... d826b540ae9647e0bb7d7c274ac1ddc2.jpg
Ответ написан
Комментировать
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
Так ёлы палы, чё тут думать? Макет то нужно рисовать в 1920 минимум!!!!
Ну растяните вы картинки при помощи css, а потом будите глядеть на эти пиксели?
Ответ написан
Комментировать
@ID25
Зачем ты используешь дивы для хедера, футера и навигации? Используй же html5 теги, header, nav, footer.
Ответ написан
@AndreyMyagkov
Если дизайнера стукнуть нельзя, предложу еще один вариант:
Берем и края шапки уводим в градиент, т.е. желтые многоугольники превращаются просто в желтый однородный фон. Тем самым и на широких экранах проблема решена и вес шапки будет приемлемым и верстальщик молодец!
Ответ написан
Комментировать
@SirMustache
Я бы отталкивался от такого варианта: jsfiddle.net/kadyhxnn
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы