Как установить фон при помощи CSS свойства background
12.08.18 ИТ / CSS 2046
Для того, чтобы задать фон для какого-либо HTML элемента, в CSS существуют специальное свойство – background. Это сокращенная запись множества свойств, отвечающих за управление внешним видом элемента. Значения можно указать в произвольном порядке, браузер способен самостоятельно определить, какое из них соответствует нужному свойству.
Среди множества свойств для установки фона обычно выделяют следующие:
- background-attachment — устанавливает, будет ли фоновое изображение прокручиваться вместе с содержимым элемента. Возможные значения: fixed, scroll, inherit, local;
- background-clip — определяет, как фоновая картинка или цвет фона будет выводиться под границами. Возможные значения: padding-box, border-box, content-box;
- background-color – служит для определения цвета фона элемента.
- background-image — устанавливает фоновое изображение для элемента. Возможные значения: url, none, inherit;
- background-origin — определяет область позиционирования фонового рисунка. Значения: padding-box, border-box, content-box;
- background-position — задает начальное положение фонового изображения, установленного с помощью соответствующего свойства. Значения: inherit, а также px, em и т.д.;
- background-position-x — задает положение фонового изображения внутри элемента по горизонтали, является нестандартным свойством и не входит в спецификацию. Значения: inherit, left, center, right, а также px, em и т.д.;
- background-position-y — задает положение фонового изображения внутри элемента по вертикали, является нестандартным свойством и не входит в спецификацию.
Значения: inherit, top, center, bottom, а также px, em и т.д.; - background-repeat — определяет, как будет повторяться фоновое изображение, установленное с помощью соответствующего свойства. Значения: no-repeat, repeat, repeat-x, repeat-y, inherit, space, round
- background-size – устанавливает масштаб фонового изображения согласно заданным размерам. Значения: auto, cover, contain, а также %, px, em и т.д.
Таким образом, универсальное свойство background содержит в себе множество свойств, которые можно записать как по отдельности, так и за один раз в свойстве background.
Как сделать на сайте картинку фоном, отличный урок
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>
Как видно под стрелками у меня вставлены два контейнера таким образом. Ну а 3 стрелка показывает на код вывода логотипа для сайта.
Не забудьте закрыть тег </div>.
Какие фоны бывают на сайте
В окончании этого урока давайте посмотрим какие фоны могут быть. Как я уже говорил один из наиболее крутых приемов использование картинки с монотонными краями, например такую:
Как видите практически по периметру использовано однотонная заливка коричневого цвета. Вот такой же цвет делаем по всему сайту и вставляем картинку. Допустим у нас игровой блог и сама структура посередине. Красота, правда ведь?).
Фоном также может быть простой цвет, на ваш вкус. Но это смотрится почти неэффективно, сейчас этим никого не убедишь.
