Как создать фон для сайта

Как создать фон для сайта. Подключаем CSS

Фоны на веб сайтах можно подразделить на 2 группы: это растягивающиеся фоны и фоны одной картинкой.

На самом деле я долго думал, как назвать второй тип фона, и после того, что я не придумал никакого названия, решил просто его назвать “фон одной картинкой”. Хотя, конечно, все фоны — это так или иначе одна картинка. Еще можно залить фон определенным цветом, но т.к. этот вариант очень простой и некрасивый, то о нем говорить не будем.

Итак, приступим к первому варианту. Это растягивающийся фон. Почему он получил такое название? Все очень просто: в Каскадных таблицах css вы можете любую картинку, выставленную как фон, растягивать как вам угодно и выставлять как вам угодно. Для примера возьмем сайт Гостиницы mysudak.com.ua Посетив данный сайт, вы можете увидеть, что фон страницы растягивается полностью по всей ширине веб сайта.

Т.е все очень просто вы рисуете тоненькую полосу, а далее с помощью Css растягиваете ее и получаете красивый фон, который экономит место на хостинге, т.к. почти ничего не весит и, конечно же, очень быстро загружается, размер картинки всего 157 на 574. Выставить этот фон очень просто. В вашей css таблице вам нужно вписать:

.body { background-image: url(в скобках адрес или просто название картинки типа img/bg.png); background-repeat: repeat-x; в свойстве background-repeat ставим значение repeat-x это значит, что css сам будет копировать вашу картинку по горизонтали от начала до конца страницы.

Второй вариант фона это – фон одной картинкой. Для примера возьмем сайт Perfect Silk Lashes.

Также в css таблице для фона одной картинкой прописываем следующий код:

.body { background-image: url(в скобках адрес или просто название картинки типа img/bg.png); background-repeat: no-repeat; (Тут ставим параметр no-repeat чтобы картинка не копировалась самостоятельно по горизонтали и вертикали) background-position: 200px 120px (а тут выставляем местоположение нашего фона т.е 200px слева и 120px сверху)

}

Вот, собственно говоря, и никаких трудностей. Не забывайте подключить таблицу между тегами head.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Оставьте мне собщение