Урок 64 Как сделать на сайте картинку фоном

03.09.201611030

 
 
 
Всем привет на prosmo3.ru. Очень часто так бывает, что хочется вставить большую и красочную, понравившуюся вам картинку фоном для вашего сайта. А обращаться к профессионалам не всегда есть желание и средства. Да и зачем кому то платить, если сделать на сайте картинку фоном проще простого! Для этого потребуется свежая голова и трезвые мысли, а также любой html редактор. В принципе вы можете воспользоваться и средствами самого вордпресс, если делаете сайт как я, в онлайне, без посторонних редакторов. Я пробовал как то воспользоваться в админке внешний вид ----> меню, так сказать стандартным способом, но что то у меня там все так втупило, что я больше туда не лез и начал работать с файлами стилей.
как сделать картинку фоном лого

Итак для того чтобы сделать картинку фоном на сайте нам необходимо проделать несколько вещей:

  • Найти эту картинку, желательно в высоком разрешении. Очень прикольно в таком случае смотрятся картинки, где середина пуста, а сбоку что то нарисовано, для блога это оптимальный результат. В принципе, сейчас и сайты стремятся к форматному блогу, так как это красиво и аккуратно.
  • Прописать код в файле css, который поможет нам сделать картинку фоном на сайте.
  • Прописать дивы в <body>

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

Делаем картинку фоном на сайте в css

Далее открываем файл style.css нам необходимо в файле стилей прописать код в котором будет указан путь к картинке. Загрузив такую картинку с помощью кода background мы получим отличный фон на сайте. В style.css у меня прописано следующее на одном из сайтов:

как сделать картинку фоном на сайте

Как видите слева синей стрелкой указан код, который позволяет загрузить необходимую нам картинку, для дальнейшей вставке фона на сайт. Можете написать тоже самое, не забудьте изменить название картинки на свое. Кстати у меня два контейнера. За вывод картинки фоном отвечает второй, а за фон в виде цвета отвечает первый контейнер. Это сделано для того чтобы если не загрузится картинка по какой то причине, фон у вас будет. А также это применяется для того, чтобы картинка не разнилась с фоном. Обычно края вашей картинки будут монотонными для того, чтобы было красивое сочетание и не бросалось в глаза. Как видите у меня фон загружается с основной папки. Далее идут свойства картинки:

  • no-repeat означает не повторять картинку ни по горизонтали, ни по вертикали. Если вы хотите сделать фоном картинку маленькую и повторяющуюся вам необходимо указать повторение по x или y оси.
  • repeat-y повторение по вертикали
  • repeat-x повторение по горизонтали, если вы укажите просто Repeat то повторение будет как по вертикале, так и по горизонтали.
  • Ну а center top указывает на то что картинку необходимо отцентровать и прижать к верхнему краю, это очень хороший рабочий метод и подойдет вам практически ко всем целям.

Дальше нам необходимо найти тег <body> в структуре сайта. У меня он находится в header, шапке сайта. Смотрим рисунок:

как сделать картинку фоном боди

Как видите происходит вставка кода из css, делается это с помощью такого кода:

<div id="ваш_идентификатор">

Как видно под стрелками у меня вставлены два контейнера таким образом. Ну а 3 стрелка показывает на код вывода логотипа для сайта.
Не забудьте закрыть тег </div>.

Какие фоны бывают на сайте

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

фон

Как видите практически по периметру использовано однотонная заливка коричневого цвета. Вот такой же цвет делаем по всему сайту и вставляем картинку. Допустим у нас игровой блог и сама структура посередине. Красота, правда ведь?).

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

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

Рекомендую к прочтению:

Социальные кнопки, как поставить на сайт.Карта сайта, как сделать.
Твиттер регистрация, как сделать.

Следующий урок: Яндекс Метрика на вашем сайте, просто и легко.

Предыдущий урок: Кнопка вверх на сайте.

Также можете посмотреть видео ютуб как сделать картинку фоном на сайте.