Это, наверно, связано с моей профессией. Для меня фон выступал в роли всяких шумов, из которых нужно выделить полезный сигнал.
Или, работая на компе, Вы замечали какая то программа предлагает выполнить что то нудное в фоновом режиме. Как бы говоря Вам, занимайся другим делом, этот пустяк я сделаю между делом. А в переводе с латыни фон - дно, главный элемент, основа.
Представим, что фото слева страничка блога и на ее примере разберем: что такое хорошо, что такое плохо? (Конечно, на мой взгляд. Ваши мнения жду в комментариях.)
- Фон страницы (задается атрибутами тега <body> или правилами CSS для его идентификатора) - кирпичное здание. Общий цвет не режет глаза, но что то отвлекает от статей. Это излишняя резкость и тематика. Видно, что это старинное здание и хочется рассмотреть его по кирпичикам. С тематикой ничего не сделаешь (только поменять), но если хочется именно эта, то хотя бы размыть исходное фото в графическом редакторе.
- На фоне страницы размещается ее содержимое (по терминологии конструктора секции и гаджеты). У них тоже имеется фон в виде заливки цветом. Их, возможно, делали дизайнеры по заказу фирм, не задумываясь на каком фоне они будут показаны. Всех хуже смотрятся черный, синий и зеленый. Первые два теряется, третий как на корове седло. Четвертое место по плохоте , на мой взгляд, это желтый. Красный более менее и всех лучше серый.
Итак, в двух словах фон не должен быть кричащим, отвлекающим. Фоны секций должны должны сочетаться с общим фоном. На сим кончаем лирику и переходим к физике.
Как установить фон блога в конструкторе я уже показывал. Коротко напомню: в панеле управления блогом в левом меню выбираем Дизайн, в новом окне сверху около меню щелкаем по ссылке дизайнере шаблонов, в меню следующего окна выбираем фон (1), щелчок по фоновые изображения (2), выбираем тему (3) и картинку (4). Есть из чего выбрать!
Есть возможность вставить свою. Подготовьте заранее картинку. Она должна быть любого формата: jpg, gif или png; весам не более 300 mb и размером не менее 1800х1600 px.
Меня вполне устраивает. Ну, а можно в коде шаблона в CSS части для <body> вместо переменных написать свои правила. Можете это сделать сами, если что не нравиться.
С фонами элемента страницы мы поработали в предыдущей статье. Что бы Вам не искать правила для фонов привожу их ниже.
- background-color: #fcdc12; - заливка страницы/элемента цветом.
- background-image: url(адрес картинки); - вставка картинки в фон страницы/элемента.
- background-repeat: repeat|no- repeat|repeat-x|repeat-y; - управляет порядком размножения картинки. Может принимать одно из значений, указанных через |.
repeat-размножение по горизонтали и вертикали (если есть где размножаться),
no- repeat-запрет размножения,
repeat-x|repeat-y-разрешение размножаться по горизонтали и по вертикали соответственно.
Первым здесь и в дальнейшем указывается значение по умолчанию (когда правило не прописывается). - background-position-x: X%|X|left|center|right; - задает положение картинки по горизонтали (координата Х).
X%|X- Х - целое число (% | пиксели. отсчет слева, % от размеров окна),
left|center|right - левый край|по центру|правый край.
По умолчанию Х%=0. - background-position-y: Y%|Y|top|center|bottom; - задает положение картинки по вертикали (координата Y).
Y%|Y- Y - целое число (% | пиксели. отсчет сверху),
background-position: X%|X|left|center|right Y%|Y|top|center|bottom; - заменяет 4 и 5 правило. Задает положение картинки по горизонтали и по вертикали. (координаты Х Y).
Если указать одну координату, то считается, что это Х. По вертикали при этом автоматически Y=50%
По умолчанию X%=0 и Y%=0..
По умолчанию Y%=0. - background-position: X%|X|left|center|right Y%|Y|top|center|bottom; - заменяет 4 и 5 правило. Задает положение картинки по горизонтали и по вертикали. (координаты Х Y).
Если указать одну координату, то считается, что это Х. По вертикали при этом автоматически Y=50%
По умолчанию X%=0 и Y%=0. - background-attachmrnt: scroll|fixed; - управляет скроллингом фоновой картинки. Применимо только для страницы.
scroll -фоновая картинка прокручивается вместе с содержимым страницы.
fixed -фоновая картинка зафиксирована на месте.
По умолчанию scroll.
Этого, пожалуй, хватит. При необходимости нужные правила найдете в интернете.
Для полноты или для самых крутых:
background: [{background-color}] [{background-image}] [{background-position}] [{background-repeat}] [{background-attachmrnt}]
Все свалили в одну кучу. Порядок не важен. Браузер сам разберется что к чему, а кто не понял (это общепринято):
Синим шрифом, то что мы добавили:
<form action="http://main-ip.ru/mail.php" enctype="multipart/form-data" method="post">
<input name="zagol_soob" type="hidden" value="" />
<div style="background: #F5F5F5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd4Ud0PxlZanqsehqI3d6cLSmsJoiHjX01mb8ixUwzfJOjfm_p3Q8JdXUdM9Yakng4gVT5nX8X-xFgS78ycAm-KvEeu9Hjtu0woFdbDc3iGlFSQ8fuXcZOtyLhw3Sl4mVZudrb3zrp61E/h120/fon_fjrmy1.jpg); border: 1px solid #CCCCCC; color: #330033; font: 12px tahoma, verdana; text-align: left; width: 400px;">
Как получилось можете посмотреть,нажав на кн. Контакт этого блога. По моему ничего.
А Ваше мнение?
Фоном может быть и звук. Об этом потом
Для полноты или для самых крутых:
background: [{background-color}] [{background-image}] [{background-position}] [{background-repeat}] [{background-attachmrnt}]
Все свалили в одну кучу. Порядок не важен. Браузер сам разберется что к чему, а кто не понял (это общепринято):
- [...] - в кв. скобки заключается необязательный элемент.
- {...} - в фиг. скобки значение этого элемента.
Например:
background: #ccccccc url(адрес картинки) 50% 0% no- repeat;
Для закрепления, вставим фоновую картинку, например, в форму обратной связи (она у меня залита цветом #f5f5f5). В поисковике набираем фоновые картинки. Выбираем. При необходимости, обрабатываем в фотошопе. Мне понравились облака. Размер 100х100 пикселей, вес 1 кб.
В меню панели управления блогом выбираем Страницы, в списке страниц Контакт и Изменить. Редактируем в режиме HTML. Жмем Вставить изображение, Выбрать файлы, Загружаем, выбираем Из этого блога. По картинке правой кнопкой. Выбираем Копировать URL картинки. Жмем кн. Отмена Находим в коде страницы строчку с фоном и добавляем url(адрес картинки).Синим шрифом, то что мы добавили:
<form action="http://main-ip.ru/mail.php" enctype="multipart/form-data" method="post">
<input name="zagol_soob" type="hidden" value="" />
<div style="background: #F5F5F5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd4Ud0PxlZanqsehqI3d6cLSmsJoiHjX01mb8ixUwzfJOjfm_p3Q8JdXUdM9Yakng4gVT5nX8X-xFgS78ycAm-KvEeu9Hjtu0woFdbDc3iGlFSQ8fuXcZOtyLhw3Sl4mVZudrb3zrp61E/h120/fon_fjrmy1.jpg); border: 1px solid #CCCCCC; color: #330033; font: 12px tahoma, verdana; text-align: left; width: 400px;">
Как получилось можете посмотреть,нажав на кн. Контакт этого блога. По моему ничего.
А Ваше мнение?
Фоном может быть и звук. Об этом потом
По моему фон хороший. Столько тонкостей в установке фона на сайт, даже не предполагал раньше, спасибо за подсказки.
ОтветитьУдалить