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

Question

[Oleg Front]

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

Вот разметка и стили, которые применил: jsfiddle.net/Frontend_Oleg/6uwp82Lw

Comments

[Роман Крылов]

пусть тебе svg предоставит

Answer 1

[olamedia .]

background-size: cover;
навешивать на body/html либо на растянутый на всю высоту контейнер

текст на фоне лучше отдельной картинкой с прозрачным фоном сделать, чтобы не обрезался

Answer 2

[raiboon]

Никак. Бейте дизайнера по голове, пока не научится думать, как его "рисуночек" будет выглядеть на экране.
Конкретно с этой шапкой ничего сделать нельзя.
Либо её перерисовать для разной ширины экрана - вплоть до 4096px -и подсовывать нужную с media_queries.
Либо пусть дизайнер думает, как свести эту картиночку к повторяющемуся или однородному фону по краям.

Comments

[Serj-One]

Бить по голове нужно людей, которые пихают фоны по 4096px.

[raiboon]

Serj-One: Внимательнее, я предлагаю загружать лишь нужный фон под разрешение экрана. Если есть 4k монитор, то и ничего, вытянут и картиночку.

Answer 3

[Никита Наумов]

проще всего разделить на 2 части - текст отдельно, фон отдельно . фону заверстать background-size:cover , а текст как есть. вроде все должно более менее смотреться

Answer 4

[Oleg Front]

ну вот да, именно вот с этой частью и проблемы, т.к. если задаю ей background: cover, то блок растягивается и выглядит вообще не о чем...

Answer 5

[Дима Паутов]

Так ёлы палы, чё тут думать? Макет то нужно рисовать в 1920 минимум!!!!
Ну растяните вы картинки при помощи css, а потом будите глядеть на эти пиксели?

Answer 6

[ID25]

Зачем ты используешь дивы для хедера, футера и навигации? Используй же html5 теги, header, nav, footer.

Comments

[Виталий Киренков]

да, это определённо решит проблему с фоном!

[archelon]

вообще-то спорный вопрос

[littleguga]

Дмитрий Бравцев: почему? (мне просто интересно)

[ummahusla]

Ну кстате соглашусь, я обычно для всех проектов беру Foundation 5, и благодаря ему привык использовать новые теги. Но к данному вопросу, это никак не поможет.

[archelon]

@littleguga
к сожалению, никак не могу найти ссылку на недавнюю статью, автор которой предлагает такую интерпретацию стандартов w3c: header и footer желательно использовать только для статей, а для оформления шапки и подвала лучше юзать обычные div#header и div#footer.

[littleguga]

Дмитрий Бравцев: спасибо, если что сам поищу.

Answer 7

[Андрей]

Если дизайнера стукнуть нельзя, предложу еще один вариант:
Берем и края шапки уводим в градиент, т.е. желтые многоугольники превращаются просто в желтый однородный фон. Тем самым и на широких экранах проблема решена и вес шапки будет приемлемым и верстальщик молодец!

Answer 8

[SirMustache]

Я бы отталкивался от такого варианта: jsfiddle.net/kadyhxnn