пятница, 19 апреля 2013 г.

Фон в блоге.

Сегодня поговорим о фоне. Фон - не знаю как у Вас, а у меня вызывает ассоциацию чего то второстепенного, неважного, иногда мешающего.
Это, наверно, связано с моей профессией. Для меня фон выступал в роли всяких шумов, из которых нужно выделить полезный сигнал.
Или, работая на компе, Вы замечали какая то программа предлагает выполнить что то нудное в фоновом режиме. Как бы говоря Вам, занимайся другим делом, этот пустяк я сделаю между делом. А в переводе с латыни фон - дно, главный элемент, основа.
Представим, что фото слева страничка блога и на ее примере разберем: что такое хорошо, что такое плохо? (Конечно, на мой взгляд. Ваши мнения жду в комментариях.)
  • Фон страницы (задается атрибутами тега <body> или правилами CSS для его идентификатора) - кирпичное здание. Общий цвет не режет глаза, но что то отвлекает от статей. Это излишняя резкость и тематика. Видно, что это старинное здание и хочется рассмотреть его по кирпичикам. С тематикой ничего не сделаешь (только поменять), но если хочется именно эта, то хотя бы размыть исходное фото в графическом редакторе.
  • На фоне страницы размещается ее содержимое (по терминологии конструктора секции и гаджеты). У них тоже имеется фон в виде заливки цветом. Их, возможно, делали дизайнеры по заказу фирм, не задумываясь на каком фоне они будут показаны. Всех хуже смотрятся черный, синий и зеленый. Первые два теряется, третий как на корове седло. Четвертое место по плохоте , на мой взгляд, это желтый. Красный более менее и всех лучше серый.
Итак, в двух словах фон не должен быть кричащим, отвлекающим. Фоны секций должны должны сочетаться с общим фоном. На сим кончаем лирику и переходим к физике.

Как установить фон блога в конструкторе я уже показывал. Коротко напомню: в панеле  управления блогом в левом меню выбираем Дизайн, в новом окне сверху около меню щелкаем по ссылке дизайнере шаблонов, в меню следующего окна выбираем фон (1), щелчок по фоновые изображения (2), выбираем тему (3) и картинку (4). Есть из чего выбрать!

Есть возможность вставить свою. Подготовьте заранее картинку. Она должна быть любого формата: jpg, gif или png; весам не более 300 mb и размером не менее 1800х1600 px.
Меня вполне устраивает. Ну, а можно в коде шаблона в CSS части для <body> вместо переменных написать свои правила. Можете это сделать сами, если что не нравиться.
С фонами элемента страницы мы поработали в предыдущей статье. Что бы Вам не искать правила для фонов привожу их ниже.

  1. background-color: #fcdc12; - заливка страницы/элемента цветом.
  2. background-image: url(адрес картинки); - вставка картинки в фон страницы/элемента.
  3. background-repeat: repeat|no- repeat|repeat-x|repeat-y; - управляет порядком размножения картинки. Может принимать одно из значений, указанных через |.
    repeat-размножение по горизонтали и вертикали (если есть где размножаться),
    no- repeat-запрет размножения,
    repeat-x|repeat-y-разрешение размножаться по горизонтали и по вертикали соответственно.
    Первым здесь и в дальнейшем указывается значение по умолчанию (когда правило не прописывается). 
  4. background-position-x: X%|X|left|center|right- задает положение картинки по горизонтали (координата Х).
    X%|X- Х - целое число (% | пиксели. отсчет слева, % от размеров окна),
    left|center|right левый край|по центру|правый край.
    По умолчанию Х%=0.
  5. 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.
  6. background-position: X%|X|left|center|right Y%|Y|top|center|bottom- заменяет 4 и 5 правило. Задает положение картинки по горизонтали и по вертикали. (координаты Х Y).
    Если указать одну координату, то считается, что это Х. По вертикали при этом автоматически Y=50%
    По умолчанию X%=0 и Y%=0.
  7. background-attachmrnt: scroll|fixed- управляет скроллингом фоновой картинки. Применимо только для страницы.
    scroll -фоновая картинка прокручивается вместе с содержимым страницы.
    fixed  -фоновая картинка зафиксирована на месте.
    По умолчанию scroll.
Этого, пожалуй, хватит. При необходимости нужные правила найдете в интернете.
Для полноты или для самых крутых:

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://lh4.googleusercontent.com/-kSNViaFKwmc/UYFlINze6tI/AAAAAAAABVA/JSP2_yWNP9Q/h120/fon_fjrmy1.jpg); border: 1px solid #CCCCCC; color: #330033; font: 12px tahoma, verdana; text-align: left; width: 400px;">

Как получилось можете посмотреть,нажав на кн. Контакт этого блога. По моему ничего.
А Ваше мнение?


Фоном может быть и звук. Об этом потом


1 комментарий:

  1. По моему фон хороший. Столько тонкостей в установке фона на сайт, даже не предполагал раньше, спасибо за подсказки.

    ОтветитьУдалить

От Вас деловой комментарий - Вам подарок!