WEB лаборатория DLE » Другое для WEB » Разное и другое » Как сделать фон картинкой
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 6
    Пользователей: 0
    Гостей: 6


    Последние комментарии
    ...
    HI-tech:
    0

    Как сделать фон картинкой

    Как сделать фон картинкой


    Очень часто страницы сайта делают с фоном в виде картинки. И я регулярно получаю вопросы о том, как это сделать. Поскольку ответить одним словом здесь не получится (новички не поймут, а опытные и так это знают), я и решил рассказать в этой статье, как сделать фон картинкой.

    Существует 3 основных варианта фона: градиент по горизонтали, градиент по вертикали и обычное изображение.

    Начнём с фона в виде градиента по горизонтали. Первым делом, Вам необходимо вырезать изображение шириной в 1 пиксель и высотой с самого начала до того места, где уже нет изменения цвета. В итоге, получится, длинная вертикальная полоска толщиной в 1 пиксель. Пусть её высота будет 800 пикселей. Чтобы сделать такой градиентный фон, необходимо в CSS написать следующее:
    body {
    background: url("images/bg.jpg") repeat-x #dedede;
    }


    Таким образом, эта полоска размножится по всей ширине экрана и получится градиентный фон. Возможно, Вы сейчас спросите: "А что будет, если высота будет больше 800 пикселей?". Вот для этого мы и задали "#dedede" - тот цвет, где уже нет указанного фонового изображения. Безусловно, у Вас будет другое значение, которое соответствует самому последнему цвету в градиенте. Таким образом, получится, что вначале идёт градиент, а уже потом однотонный цвет, и никаких рывков не происходит.

    Абсолютно аналогичный принцип и с градиентом по вертикали, только нужно уже вырезать картинку высотой в 1 пиксель, а также необходимо центрировать сам фон по центру:
    body {
    background: url("images/bg.jpg") repeat-y center #dedede;
    }


    Иногда, центрирование не требуется.

    И, наконец, как сделать фон в виде обычной картинки. Здесь надо понимать один очень важный момент. Картинка не меняет свои размеры в CSS. Поэтому не получится сделать резиновую вёрстку там, где находится картинка в фоне, другими словами, картинка не будет растягиваться. А задаётся она аналогично:
    body {
    background: url("images/bg.jpg") no-repeat #dedede;
    }


    Цвет вне изображения надо задавать таким, чтобы был плавный переход от границ картинки к этому цвету.

    Я показал Вам, как сделать фон картинкой. Безусловно, есть различные особенные случаи, где нужно уже думать самостоятельно, а самые основные и популярные варианты, Вы теперь уже знаете.



    Теги:

    Другие новости по теме:

    • Закруглённые углы через CSSНаверняка, Вы часто встречали блоки с закруглёнными углами. За примером далеко ходить не надо, достаточно посмотреть вправо и приглядеться к моим блокам, у которых как раз углы и закруглены. Стоит
    • Как изменить фон у радиокнопки на CSSМеня недавно попросили рассказать, как поменять фон у радиокнопки через CSS. Задача это не тривиальная, поскольку обычными путями фон радиокнопки не изменить. Однако, есть обходные пути, о которых я
    • Как сделать тень на CSSДизайнеры очень любят добавлять всякие тени на свои блоки. В Photoshop это делается в течение двух секунд, а вот для верстальщика - это целая история. Если Вы будете искать в Интернете, как сделать
    • Как сделать div со 100% heightПри блочной вёрстке часто требуется сделать у блока div высоту 100%. Простым указанием height=100% в div не получится добиться желаемого результата, поэтому тут есть определённая методика, о которой
    • Аккордеон в стиле MetroВ данном уроке мы сделаем аккордеон в стиле Metro. Меню будет использовать jQuery и jQueryUI.


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.