Фон-картинка

В предыдущей статье мы разобрали как менять цвет фона на сайте. Теперь рассмотрим как вместо фона вставить изображение. Хорошая тематическая картинка только оживит наш дизайн. Повторюсь, что для примера, я работаю со стандартным шаблоном Joomla – Protostar.
 Переходим к делу. Для начала выберем фоновое изображение которое мы хотим вставить на наш сайт. Размеры приблизительно 1700 на 1200 пикселей. Подгоним размер и внесём необходимые правки, если такие потребуются, через графический редактор. Для несложных манипуляций подойдёт Paint. Далее заходим в панель управления Joomla. Нажимаем на раздел – Материалы, и выбираем – Медиа-менеджер. Загружаем изображение на сайт. На этом первый этап завершен.
 Открываем наш сайт, включаем консоль для исследования элементов (что такое консоль и как ей пользоваться я писал здесь). В разделе HTML выбираем bodyclass . Мы видим такую запись в CSS:
body.site {
    border-top: 3px solid #0088cc;
    padding: 20px;
    background-color: #f4f6f7; }
background-color: #f4f6f7;  – указывает какого цвета фон нашего сайта. Но нам теперь фон не нужен. Мы меняем background-color на background-image и укажем путь к изображению. Путь  к изображению в Joomla такой - images/имя картинки.jpg. И так наша запись приняла такой вид: background-image: url(/images/имя картинки.jpg). В моём случае это background-image: url(/images/melnitsa.jpg).
 Возвращаемся к размерам нашего изображения. Картинка по горизонтали заполнила монитор и уже никуда не денется, по вертикали мы быстро дойдём до её окончания. В этом случае изображение повторится. Мы, в данном случае, устанавливаем изображение природы, его повторение, по ходу чтения, эстетики не добавит. Для избегания этой проблемы мы уберём у фонового изображения эффекта прокрутки. Т.е. при прокрутке сайта вниз будет прокручиваться контейнер с содержимым, а фон будет оставаться на месте.


Убираем эффект прокрутки фонового изображения. Для этого нам надо внести изменения в ту же строку где прописан путь к картинке. Добавим background-repeat:no-repeat; background-attachment:fixed; Фон не повторяется и фон фиксирован.
 Теперь наши правила выглядят так:
body.site {
    border-top: 3px solid #0088cc;
    padding: 20px;
    background-image: url(/images/melnitsa.jpg);background-repeat:no-repeat; background-attachment:fixed; }
}
 При желании мы можем увеличить прозрачность текстового поля (контейнера). Это придаст сайту более яркий вид. Как это сделать я писал здесь.
 Теперь тестируем наш вариант в консоли. Проверяем соответствие картинки дизайну сайта, подгоняем цвета меню и контейнера. При удовлетворительном результате переходим к файлам сайта и производим правку кода.