Фон для блока (background-size)

[Alfa2015]

Здравствуйте! Подскажите, как правильно (упор делаю именно на "как правильно", как попало -- я смогу сделать )))  )  оформить блок с фоном (с большой картинкой для фона). 

Не слишком ли огромный фон (почти на 2 экрана)? А как тогда текст ровнять? неужели с помощью position:absolute?

Пример того, что у меня получилось можно посмотреть здесь

А надо так: http://savepic.su/6522035.png

Спасибо.

Edited November 17, 2015 by Alfa2015

[rus]

такие фоны обычно делают для боди, и если вы хотите на всю ширину и высоту, то вот так:

body {  background: url(images/body_bg.jpg) no-repeat center center fixed;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;  height: 100%;  width: 100%;}

что значит ровнять текст? так же как и обычно, используете нужные html блоки, а к ним стили

[Alfa2015]

Для body не пойдет! Это лендинг. Для каждого экрана свой фон.

[rus]

Для body не пойдет! Это лендинг. Для каждого экрана свой фон.

тогда используйте вот это: http://alvarotrigo.com/fullPage/ в архиве есть пример с картинками во всю страницу.

[Alfa2015]

Я использую bootstrap...в общем, нужно padding указать и фон "влезет" в блок...я думала, может, как-то по-другому можно, а то отступ какой-то гиганский))))) и плюс текст нужно как-то "приподнять" вверх (padding же опускает текст на 250px) и что, придется position:absolute использовать...

section {   padding: 230px 0;}

Edited November 18, 2015 by Alfa2015

[Igor Schnaider]

 

Не слишком ли огромный фон (почти на 2 экрана)?

Вы про дизайн задаете вопрос что ли?

Честно говоря, вообще не понятно, что вы хотите :-)

Посмотрите, например, как сверстана эта страница. Может поможет.

[Alfa2015]

Честно говоря, вообще не понятно, что вы хотите :-)

 

Я хочу растянуть фон в блоке. Не картинку (это я знаю как), а фон. Пример я привела выше, там видно, что у  меня не получается.

[Igor Schnaider]

Я хочу растянуть фон в блоке. Не картинку (это я знаю как), а фон. Пример я привела выше, там видно, что у меня не получается.

В смысле, вам надо, чтобы фон по высоте во вьюпорт помещался?

Edited November 18, 2015 by Igor Schnaider

[Alfa2015]

В смысле, вам надо, чтобы фон по высоте во вьюпорт помещался?

 

Вот, набросала схематически, что надо: http://savepic.su/6499367.png

[Igor Schnaider]

 

В смысле, вам надо, чтобы фон по высоте во вьюпорт помещался?

 

Вот, набросала схематически, что надо: http://savepic.su/6499367.png

 

Блин, ну если вы хотите делать именно фоном и чтобы он был 100% по ширине и не обрезался снизу, вам на блоке надо соблюдать пропорции ширина/высота, как у картинки (в данном случае 1109/668).

Попробуйте так.

[Mozzie]

А как тогда текст ровнять? неужели с помощью position:absolute?

http://htmlbook.ru/css/position в любом случае нужно будет использовать, можно и relative.

Мне кажется будет правильней

 

Вместо padding-а использовать margin

section.primary {    margin: 60px 0px;}

И добавить center top:

.primary {background: transparent url("../images/h4.png") no-repeat scroll center top / contain;}

Так вроде хорошо..

Edited November 18, 2015 by Mozzie

[Mozzie]

На скриншоте локоть девушки вылазит из нашего блока и это можно сделать так:

background-position: 40%;

[Alfa2015]

Так вроде хорошо..

 

Да, хорошо получилось. Спасибо. 

 

А вот, выровнять текст? Я применила position:relative -- текст, конечно, сверху, но сам  сontainer (блок, в кот находится текст) снизу. Это как, нормально? (как-то не профессионально, на мой взгляд   )

Я, конечно, пробовала ставить сontainer относительное позиционирование, тогда при попытке "отпустить" вниз форму, фон как-то увеличивается...

Edited November 20, 2015 by Alfa2015

[Mozzie]

 

Так вроде хорошо..

 

Да, хорошо получилось. Спасибо. 

 

А вот, выровнять текст? Я применила position:relative -- текст, конечно, сверху, но сам  сontainer (блок, в кот находится текст) снизу. Это как, нормально? (как-то не профессионально, на мой взгляд   )

Я, конечно, пробовала ставить сontainer относительное позиционирование, тогда при попытке "отпустить" вниз форму, фон как-то увеличивается...

 

Обнови пример что получилось.

[Igor Schnaider]

Да, хорошо получилось. Спасибо.

Вы вначале спросили, как делать правильно, а не как попало. Вот то, как сделали вы - делать как раз не надо :-)

Что за магическое значение 277px: что будет, если добавить еще несколько пунктов в списке или полей в форме? Придется опять подстраивать отступы.

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

 

А с фоном и background-size: contain; нужно соблюдать одно условие: поддерживать соотношение сторон. То есть в случае, когда контент меньше картинки, высота должна соблюдать соотношение; в случае, если больше, то auto.

Для того, чтобы соблюсти соотношение высота/ширина, наверное нужно будет добавить фейковый элемент, как-то так.

В общем, больше возни с этим получается, логичнее вместо всей этого просто картинку использовать.

 

Я вам не случайно сайт Эпла привел в пример в моем прошлом сообщении. Там много таких моментов. Или вот еще тоже. Можно посмотреть, как сделано вокруг большой картинки.

Edited November 20, 2015 by Igor Schnaider