Jump to content
  • 0

background-image


DrStrangeLove
 Share

Question

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

Хотелось бы понять, как фон работает в этом примере:

слою с идентификатором #page задан фон, но не задана ширина, высота совсем.. За счёт чего он растягивается как надо??

Заранее Спасибо!!

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

за счёт содержимого.

т.е. правильно ли я понимаю, что, по большому счёту заценить фоновую картинку можно только когда уже закончил верстать макет(если раньше, то фон. картинка будет не целая)??

Link to comment
Share on other sites

  • 0

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

Сам блок занимает столько места, сколько занимает его содержимое (в высоту. В ширину — весь поток, если явно не указано иное), либо же столько, сколько ему явно указано.

Link to comment
Share on other sites

  • 0

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

Сам блок занимает столько места, сколько занимает его содержимое (в высоту. В ширину — весь поток, если явно не указано иное), либо же столько, сколько ему явно указано.

А если контент в высоту больше высоты фоновой картинки?? Как быть??

(понятно, что фон. картинке поставлен no-repeat)

Link to comment
Share on other sites

  • 0

а фоновую картинку надо ещё и растянуть по размеру блока?

Тогда background-size.

Только вот поддерживают это свойство только последние версии браузеров.

А без background-size??

Link to comment
Share on other sites

  • 0

Ещё вопрос по тому же примеру..

Футер (с фон.картинкой) через отриц. margin-top подтянут вверх, при этом конец абзаца идёт поверх верхней части фон. картинки футера... Конец абзаца находится в совсем другом блоке (не футер).

Что заставляет текст идти поверх фон. картинки футера?? разве футер подтянутый вверх через отриц. margin-top не должен наложиться поверх текста конца абзаца??

P.S.: никаких z-index'ов я не нашёл...

Link to comment
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.

 Share

×
×
  • 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