Как эта область заголовка работает во всех браузерах?

Question

Я только что видел этот браузер здесь:

http://www.dietriffic.com/

Теперь, зеленый раздел вверху, независимо от того, как я изменил размеры моего окна просмотра (Chrome), он управляетлибо заполнить его полностью, либо просто не показать все это.Как оно работает?Это изображение верно?Они не могли подготовиться к экрану любого размера, не так ли?

Спасибо!

Answer 1

Использование Firebug:

Зеленый квадрат

<div id="header_area" class="full_width">

Используется повторяющееся фоновое изображение (зеленый) размером 50x50, которое они используют для заполнения всего div "плитками",Тот факт, что div всегда соответствует ширине области просмотра браузера - это класс "full_width":

.full_width {
    clear: both;
    width: 100%;
}

Это width: 100%, которое выполняет масштабирование.

Кроме того, центрированный текст - это не изображение, а настоящий текст.Они достигают центрированного выравнивания с

margin: 0 auto;

на элементе контейнера.

Answer 2

Используется изображение с повторением по горизонтали и вертикали по ширине всего заголовка:

и центрированное, не повторяемое в основном прозрачный PNG для этого эффекта свечения в середине заголовка: