ФорумПрограммированиеПыхнуть хотите?F.A.Q. → Верстка: масштабирование фона

Верстка: масштабирование фона

  • Timur

    Сообщения: 1068 Репутация: N Группа: Джедаи

    Spritz 9 декабря 2008 г. 3:35

    [size=14pt]Как растянуть фоновый рисунок по всей ширине/высоте блока?[/size]

    Уже не первый раз слышу этот вопрос, поэтому решил оформить в виде статьи. Профессионалы вряд ли подчерпнут здесь что-то новое, статья рассчитана исключительно для новичков.

    Что бы не было недоразумений (ну вдруг, кто-то не знает?), нужно сказать о таком распространенном случае, когда нужно растянуть фон по всей ширине или высоте блока. А фоновый рисунок при этом  является простым градиентом. Если тянем по ширине

    • создаем картинку с шириной в [tt]1px[/tt] и необходимой высотой;

    • ставим её на фон и устанавливаем, что бы фон повторялся только по ширине:
      <div style="background:url(bg.png) repeat-x;"></div>

      Если растягиваем по высоте — заменяем на [tt]repeat-y[/tt].


    Теперь к непосредственной теме статьи. Сразу хочу напомнить, что все используемые форматы изображений в веб — растровые, т.е. даже при незначительном растяжении картинки, её качество будет значительно ухудшаться. Поэтому до CSS3 эта возможность в таблицах стилей не предусматривалась.

    Но не забываем, что на календаре – «Веб-два-ноль». IE5 давно исчез, IE6 медленно, но верно движется к тому же итогу. Некоторые современные браузеры уже поддерживают формат SVG — который так и расшифровывается «Scalable Vector Graphics» — масштабируемая векторная графика. Т.е. размеры картинок в этом формате можно свободно изменять без всякой потери качества.
    Видимо поэтому в CSS3 будет свойство background-size, непосредственно отвечающее за масштабирование фона. Opera, Safari и Konqueror уже поддерживают это свойство через [tt]-o-background-size[/tt], [tt]-webkit-background-size[/tt] and [tt]-khtml-background-size[/tt], соответственно. К сожаленью свойства [tt]-ie-background-size[/tt] не существует и врядли оно появится в ближайшем времени. Поэтому, как обычно, будем извращаться.

    Итак, если уж возникла суровая необходимость привязать размеры фона к размерам блока можно использовать следующий приём.
    Создается дополнительный блок-обертка, для которого устанавливается position:relative. В него

    • помещается картинка ([tt]<img>[/tt]), используемая в качестве фона.

    • собственно, блок, к которому нужно привязать фон. Блок обязательно должен иметь [tt]position:absolute[/tt]

    Для обоих элементов устанавливаются [tt]width:100%[/tt] и [tt]height:100%[/tt]. Теперь их размеры привязаны к размерам блока-обертки и изменяются вместе с ним. В данном случае, при абсолютном позиционировании блока, он помещается поверх картинки и она становится «фоном».

    Ниже пример. Для наглядности, вместо блока используется таблица (естественно, можно использовать что угодно).
    <style type="text/css">
    /* Блок-обертка */
    #table-outer {
    position:relative;
    width:300px;
    height:300px;
    }

    /* Фоновый рисунок */
    #table-bg {
    width:100%;
    height:100%;
    }

    /* Фон и таблица растягиваются по всей ширине и высоте блока-обертки */
    #self-table {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    }

    /* Ячейка таблицы */
    #self-table td {
    border:1px solid #999;
    text-align:center;
    }
    </style>

    <!– Блок-обертка –>
    <div id="table-outer">

    <!– Фоновый рисунок –>
    <img id="table-bg" src="table-bg.png" alt="Фоновый рисунок" />

    <!– Таблица –>
    <table id="self-table">
    <tr><td>1.1</td> <td>1.2</td> <td>3.1</td></tr>
    <tr><td>2.1</td> <td>2.2</td> <td>3.2</td></tr>
    <tr><td>3.1</td> <td>3.2</td> <td>3.3</td></tr>
    </table>

    </div>


    Ссылки:

Пожалуйста, авторизуйтесь, чтобы написать комментарий!