Главная » Статьи » FAQ по сайту
Как поставить фон на сайт? (свойство css)
Итак, Вы скачали фон с нашего сайта, и теперь не знаете, как его поставить? Просто внимательно прочитайте данную статью.
C помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость фона как для отдельного элемента, так и для всего сайта. Последнее, является заданием настроек для тэга body. Давайте рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства, какое вы сможете увидеть ниже.

background-color — задает цвет фона. Можно применять к отдельным элементам (например div) или ко всему сайту через через тэг <body>:

/* черный фон сайта */
body { background-color: #000; }
/* черный фон заголовка, белый цвет шрифта */
h1 { color: #fff; background-color: #000; }

background-image — используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:

body { background-color: #000;
background-image: url («my-image.jpg»); }

Обратите внимание как указан путь к изображению — это означает, что оно должно находится в той же самой папке, что и css файл стилей. В противном случае следует указывать правильный путь к изображению.

background-repeat — используемое в предыдущем примере изображение будет повторяется по всему экрану. Данное свойство (repeat) призвано управлять этим процессом. Имеется несколько допустимых значений:

· background-repeat: repeat-x — изображение повторяется только по горизонтали
· background-repeat: repeat-y — изображение повторяется только по вертикали
· background-repeat: repeat — изображение повторяется по горизонтали и вертикали
· background-repeat: no-repeat — изображение не повторяется
background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:

· background-attachment: scroll — прокручивается вместе со страницей
· background-attachment: fixed — при прокрутке фон остается неподвижным
background-position — задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:
· в фиксированных единицах (пикселы, сантиметры)
· в процентах
· словесно: — top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).
Рассмотрим примеры:
· background-position: 20px 50px — изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
· background-position: 50% 25% — расположено по центру по горизонтали и отступает на 25% сверху.
· background-position: right bottom — рисунок располагается снизу справа.
Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Пример:
background: #fff url («my-image.jpg») no-repeat fixed left bottom;

Если какое-то свойство пропускается, то его значение установлено по умолчанию.

Примеры установки:

1) Бордюр (изображение повторяется только по вертикали)

 

body {background: #000000 url(/путь к фону.gif); background-repeat: repeat-y;}


2) Сплошной (изображение повторяется по горизонтали и вертикали)



body {background: #000000 url(/путь к фону.gif); background-repeat: repeat;}


Категория: FAQ по сайту | Добавил: Admin (05.12.2011)
Просмотров: 12059 | Теги: Как поставить фон на сайт? | Рейтинг: 5.0/8
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Выберите категорию
Полезные статьи [104]
Различные полезные статьи: разные виды заработка в интернете, раскрутка сайта, уроки фотошопа и многое другое..
FAQ по сайту [7]
Скрипты [4]
Только нужные и полезные скрипты
ПОДПИСКА RSS: СТАТЬИ

 Укажите свой e-mail:

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

Это интересно
загрузка...