На форуме одним из популярных вопросов, который мне задают, это вопрос о том, как поменять фон на сайте. Это первое, что часто хотят сделать при создании сайта новички. Именно для Вас, новичков, я и предлагаю это статью. Постараюсь рассмотреть все возможные случаи и рассказать о них на понятном языке.
Итак, давайте по порядку. Первое, о чем Вам нужно задуматься, если Вы решили поменять фон, это то, как он должен себя вести при разных расширениях монитора. Большинство новичков об этом совершенно забывают. А ведь мониторы у всех разные, поэтому это обязательно надо иметь в виду. Давайте разберемся, какие варианты возможны:
1. Вы задаете фон просто цветом. Этот вариант легко реализовать. Он не будет долго грузиться и будет одинаково выглядеть абсолютно на всех мониторах и браузерах. Но многим хочется красоты. Поэтому идем дальше
2. Можно задать фон из картинки, которая может повторяться по вертикали или по горизонтали, или по обоим направлениям. Как пример, вот картинка фона шапки на этом сайте
Как видите, этот кусочек фона можно повторять по ширине столько раз, сколько понадобится, чтобы заполнить всю ширину экрана монитора.
3. Но если и это вам не подходит, и Вы хотите поставить картинку, например, какой-то пейзаж. То тут возможны 3 варианта
3.1. Можно сделать картинку под самый маленький монитор (обычно это 1024px) и разместить этот фон по центру , плюс задать цвет фона, который будет заполнять свободное место там, где не будет картинки при более больших размерах монитора.
3.2. Можно сделать картинку автоматически масштабируемую под размеры монитора, но это работает не во всех браузерах, например, не работает в Internet Explorer. Поэтому такой вариант подойдет очень немногим.
3.3. Последний вариант - это скорее дополнительный момент к 2 предыдущим: фон может заполнять все пространство страницы, а может совпадать с размером монитора и при прокручивании страницы оставаться неподвижным.
Вот, в общем-то, и все варианты. Если определились, давайте начнем.
Фон страницы обычно задается в теге <body> с помощью свойства background.
Возможны два варианта:
1. свойство может быть задано прямо в шаблоне страницы
2. свойство может быть прописано в таблице CSS
Причем, если свойство прописано и там, и там, то сработает то, что написано в шаблоне.
Если свойство прописано в шаблоне, то выглядит оно примерно так:
<body style="background: #FcFcFc;">
свойств внутри может быть гораздо больше, они перечисляются через запятую, но нас интересует только свойство background
если оно прописано в таблице css, то в шаблоне будет просто
<body>
а в таблице css примерно так:
body {background: #FcFcFc;}
В чем тут принципиальное отличие? В том, что если у Вас первый вариант , изменения придется производить во всех используемых шаблонах: шаблоне каталога статей, шаблоне модуля новостей и так далее. Тут Вам будет полезна функция Быстрая замена участков кода. Вам необходимо будет сначала настроить код в шаблоне страницы сайта. А потом зайти в Меню - Дизайн -Быстрая замена участков шаблона - Что заменить - вставляете код <body .......> , какой он остался в изначальных шаблонах , На что заменить: - новый код . Тогда замена будет проведена во всех шаблонах. Другой вариант. Сразу заменить изначальный код на просто <body>, и тогда уже все изменения надо будет делать только в таблице css (вариант 2)
Итак, с основными моментами разобрались. А теперь разберем и все свойства. Я буду приводить примеры кода, которые соответственно Вы сможете внедрить следующим образом:
- в шаблоне страницы
<body style="пример кода">
- в таблице CSS
body {пример кода}
1. Задаем фон прост цветом
background: #FcFcFc;
цвета очень хорошо можно подобрать здесь : Подбор цвета
2. Задаем фон картинкой
background: url('адрес картинки');
3. Задаем фон картинкой, которая будет повторяться по горизонтали
background: url('адрес картинки') repeat-x;
4. Задаем фон картинкой, которая будет повторяться по вертикали
background: url('адрес картинки') repeat-y;
5. Задаем фон картинкой, которая будет повторяться и по горизонтали, и по вертикали
background: url('адрес картинки') repeat;
6. Задаем фон картинкой, которая будет по центру горизонтали и по верху по вертикали
background: url('адрес картинки') 50% 0%;
7. Задаем фон картинкой, которая будет по центру горизонтали и по верху по вертикали , плюс цвет, там, где картинки не будет
background:#fcfcfc url('адрес картинки') 50% 0%;
8. Задаем фон картинкой, которая не будет прокручиваться при прокручивании страницы
background:#fcfcfc url('адрес картинки') 50% 0%;background-attachment: fixed;
9. Задаем фон картинкой, которая будет масштабироваться
background: url('адрес картинки');background-size:100%;
|
