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

[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>

Ссылки:

• CSS Backgrounds and Borders Module Level 3 - черновик спецификации W3C.


• Раскладка позиционированием - отличная статья, к прочтению обязательна.