Хак с немасштабируемым фоном страницы

26 Jun. 2009

Прикольно на Блондинка.ру фон страницы сделан. Картинка — IMG — положена ниже остальных блоков страницы при помощи z-index. Спозиционирована абсолютно, с шириной 100% — всегда растягивается на всё окно. Сама картинка маленькая (500 х 286 px) но из за того, что рисунок нечёткий, незаметно, что оно сильно растянуто.

Самое, наверное, интересное, что картинка не масштабируется при page zoom-e (в Опере она в какой-то момент начинает, но в Фоксе — нет). Немного необычно смотрится. Отличный хак: дешево и сердито )) Раньше не встречал.

IMG#bg-fon{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: inline-block !important;   
}

А еще, фон рандомно меняется при обновлении окна.

5 Responses to “Хак с немасштабируемым фоном страницы”

  1. gordi Says:

    Если уменьшить размер окна браузера до появления горизонтальной прокрутки и подвигать ее, то справа видно оканчание картинки, что само по себе не красиво :(

  2. uggallery Says:

    Ага, точно. Цвета, наверное, у картинки и страницы совпадают, но при растягивании у картинки они искажаются, отсюда и заметная граница. Можно попробовать сделать png с прозрачностью по краям.

  3. gordi Says:

    Фишка, конечно, интересная :)
    Но графика должна быть не четкой и ее резкость по минимуму.
    Сдерживающий фактор :(

  4. WilliamKidd Says:

    А это не то же, что здесь: http://www.cssplay.co.uk/layouts/background ?

  5. uggallery Says:

    WilliamKidd: Да, похоже, оно. Я, как раз, гадал: сами они придумали или взяли где. Теперь ясно, спасибо!