Jump to content
  • 0

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


Question

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

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

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

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

Спасибо.

Edited by Alfa2015
Link to post
Share on other sites

14 answers to this question

Recommended Posts

  • 0

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

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 блоки, а к ним стили :)

Link to post
Share on other sites
  • 0

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

section {   padding: 230px 0;}
Edited by Alfa2015
Link to post
Share on other sites
  • 0

 

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

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

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

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

Link to post
Share on other sites
  • 0
Честно говоря, вообще не понятно, что вы хотите :-)

 

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

Link to post
Share on other sites
  • 0
Я хочу растянуть фон в блоке. Не картинку (это я знаю как), а фон. Пример я привела выше, там видно, что у меня не получается.

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

Edited by Igor Schnaider
Link to post
Share on other sites
  • 0

 

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

 

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

 

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

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

Link to post
Share on other sites
  • 0
А как тогда текст ровнять? неужели с помощью 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 by Mozzie
Link to post
Share on other sites
  • 0
Так вроде хорошо..

 

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

 

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

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

Edited by Alfa2015
Link to post
Share on other sites
  • 0

 

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

 

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

 

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

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

 

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

Link to post
Share on other sites
  • 0
Да, хорошо получилось. Спасибо.

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

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

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

 

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

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

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

 

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

Edited by Igor Schnaider
  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy