Задаем фоновую картинку для сайта

Фоновая картинка для сайта

Приветствую вас на сайте Impuls-Web!

Одним из наиболее значимых элементов дизайна является качественно подобранная фоновая картинка для сайта или цвет фона, которые будут наилучшим образом подходить к тематике сайта и выбранной цветовой схеме оформления. Но, кроме того, что вам нужно тщательно подобрать фоновое изображение для сайта, его нужно еще правильно установить, и, в зависимости от ситуации, применить дополнительные эффекты.

Как задается фоновая картинка для сайта?

Некоторые CMS, такие как, например, WordPress дают возможность задать фоновое изображение или цвет в настройках оформления темы. В этом случае вам всего лишь нужно:

  1. 1.В консоли сайта зайти в пункт «Внешний вид» => «Настроить».
  2. задать фоновую картинку в WordPress
  3. 2.В открывшемся меню настроек темы выбираем пункт «Фоновое изображение».
  4. Настройки темы WordPress
    В зависимости от темы название этого пункта может меняться или вообще этот пункт может находиться в каком-то другом разделе меню или отсутствовать.
  5. 3.Далее нажимаем кнопку «Выбрать изображение»
  6. Задаем фоновое изображение для сайта
  7. 4.И через медиабиблиотеку загружаем фоновое изображение для сайта.
  8. Медиабиблиотека WordPress
  9. 5.После того как вы выберете картинку, вам будут доступны дополнительные параметры для фонового изображения.
  10. Настройка фоновой картинки для сайта
  11. 6.Перед выходом из настроек не забудьте нажать на кнопку «Сохранить и опубликовать».
Обратите внимание! Для фона лучше всего выбирать изображения, которые имеют разрешение не менее 1200px-1600px по ширине, так как при больших разрешениях мониторов, если картинка будет меньшего размера, будет очень заметно плохое качество фона.
Не стоит так же выбирать изображения, которые имеют разрешение по ширине больше 1600-1800 пикселей. Так как в этом случае картинка будет иметь слишком большой размер и это обязательно скажется на скорости загрузки сайта.

Как задать фоновое изображение для сайта через CSS?

Конечно, это очень удобно, если ваша CMS поддерживает установку фоновой картинки для сайта из админки. Но что же делать, если такой возможности нет или ваш сайт сделан без CMS?

В этом случае фоновую картинку для сайта лучше всего установить через css-стили. Для этого:

  1. 1.При помощи FTP-клиента или панель управления хостингом, загружаем в папку с изображениями, которая находится в корневой папке сайта на хостинге, фоновое изображение для нашего сайта. Если у вас нет такой папки, или вы не можете ее найти, то вы можете сами создать новую папку, и назвать ее, например, «Images» или «img».
  2. 2.Откройте файл стилей вашего сайта или файл стилей темы, в случае если у вас сайт сделан на CMS, при помощи Notepad++.
  3. Как редактировать файлы сайта по FTP с помощью Notepad++ я рассказывала в этой статье:
    Редактирование файлов сайта в Notepad++
  4. 3.Пролистайте в самый конец файла стилей и допишите следующий код для тега body:

Вместо bg-fon.jpg – будет название вашего файла с фоновым изображением.
Вместо images может быть название вашей папки с изображениями, в том случае если она называется по другому.

В моем случае фоновая картинка для сайта находится в папке «images» в папке темы на одном уровне вложенности с файлом стилей, поэтому я указала относительный адрес расположения картинки.

У вас может быть другое расположение, и данный код может не сработать. В этом случае нужно будет указать адрес фоновой картинки относительно расположения файла стилей. Например, так:

Две точки и слеш указывают на то, что фоновое изображение находится за пределами папки, в которой находится файл стилей.

Дополнительные параметры фоновой картинки для сайта

Для фонового изображения можно применить дополнительные параметры, которые позволят добиться некоторых, дополнительных эффектов, значительно улучшающих внешний вид.

В код, приведенный выше можно добавить следующие параметры:

  1. 1.Свойство background-repeat. Можно задать следующие значения:
    • repeat – повтор фона по вертикали
    • no-repeat – нет повтора
    • repeat-x – замостить по горизонтали
    • repeat-y – замостить по вертикали
  2. 2.Свойство background-position. Имеет несколько основных параметров:
    • top left – выровнять фон по верхнему левому краю
    • top right — выровнять фон по верхнему правому краю
    • bottom right – выровнять по нижнем правому краю
    • bottom left– выровнять по нижнем правому краю
    • top center — выровнять фон горизонтально по центру, а вертикально по верхнему краю
    • center – позволит выровнять фон по центру страницы как по горизонтали так и по вертикали.

    Также background-position можно задавать в процентах или пикселях.
    В этом случае это будет выглядеть так:

    где, 30px – это отступ сверху, а
    50% — это положение по горизонтали (отступ слева)

    Таким образом, при использовании этого свойства на первом месте стоит значение позиционирования по вертикали (top, bottom, center, проценты или пиксели), а на втором значение по горизонтали (left, right, center, проценты или пиксели)

  3. 3.Привязка фона при помощи свойства background-attachment:
    • fixed – фон остается на месте при прокручивании страницы
    • scroll – фон прокручивается вместе со страницей
  4. 4.Растянуть фоновое изображение для сайта по ширине:

  5. 5.Растянуть фоновую картинку по высоте и по ширине:

С использованием данных параметров, код для нашего фонового изображения будет выглядеть следующим образом:

В случае если вы задаете фон для сайта, сделанного на CMS, то возможно вы можете столкнуться с тем, что данные стили не будут срабатывать. Это может произойти из-за того, что в теме оформления уже где-то были заданы стили для свойства background. В этом случае для каждого свойства нужно приписать правило !important, а так же более детально изучить вёрстку данной темы.

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

Если статья была для вас полезной – не забудьте поделиться ею в соцсетях, а так же подписаться на рассылку.

А на сегодня у меня все. До встречи в следующих статьях.

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif