Jump to content
  • 0

Фон на height:100%


kozakmamai
 Share

Question

Необходимо чтобы фон заголовка (а заголовок может быть разной высоты-2,3 строки текста), тянулся по высоте этого заголовка, тоесть высота изображения вмещалась в высоту контейнера заголовка. Пример:

example.png

Необходимо это реализовать для IE6 без expression

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
Необходимо чтобы фон заголовка (а заголовок может быть разной высоты-2,3 строки текста), тянулся по высоте этого заголовка, тоесть высота изображения вмещалась в высоту контейнера заголовка. Пример:

example.png

Необходимо это реализовать для IE6 без expression

Здорово, как Вы четко поставили ТЗ, всем бы остальным заказчикам также! =)

Link to comment
Share on other sites

  • 0

Так как бекграунд тянется пропорционально...

То невижу другого решения кроме как цеплять его имгой на абсолют с высотой и шириной в 100%; А заголовку релейтив. И он будет тянуть блок, а картинка тоже потянется

<div>
<img>
<h2>
<div>

Link to comment
Share on other sites

  • 0
Для того чтобы img потянулся в решение, предложенном mishka2, для img, можна записать так:

height:expression(this.parentNode.offsetHeight);

Но а как решить проблему на чистом CSS?

Только эмуляцией, допустим, что картинка при расширении не меняет пропорций градиентных фрагментов, то есть, грубо говоря, приростает только белое поле, тогда задаем контейнеру белый бекграунд цветом и верхней половинкой, - внутрь блок с нижней половинкой. А пропорционально менять рисунок в бекграунде - CSS не сможет. а менять размер картинки IMG без указания габаритов ее родителя - не сможет IE6.

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