Как сделать фон в html и CSS?

Здравствуйте, дорогие друзья!

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

Как в html сделать фон в виде цвета или картинки?

Вы можете задавать фон блока или всей страницы с использованием различных вариантов:

  • при помощи цвета,
  • использовать изображение,
  • градиентный фон,
  • использовать сразу несколько вариантов (например, картинка + цвет или несколько картинок сразу).

Введу того что HTML не особо предназначен для визуального оформления страницы, в с помощью HTML можно сделать только фон в виде цвета или изображения. Для использования остальных вариантов создания фона нам не обойтись без помощи CSS. Но обо всём по порядку.

Чтобы в html сделать фон нам понадобится атрибуты bgcolor и background.

Для того чтобы в HTML сделать фон в виде цвета нужно к тегу для которого нам нужно задать фон дописать атрибут bgcolor

Чтобы сделать фон в виде изображения используем background и в кавычках указываем путь к файлу с картинкой.

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

Как сделать фон в CSS?

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

  1. 1.В HTML коде присвоить элементу, для которого мы хотим задать цвет определённый класс или использовать атрибут style. Мне больше нравится вариант с классом, поэтому в первую очередь покажу его.

  2. 2.В файле, в котором вы задаёте CSS стили для вашего сайта, нужно дописать для этого класса свойство background с нужным значением фона.
Если не знаете где и как подключить CSS или хотите дописать CSS стили прямо в HTML, то вам может понадобится эта статья:
«Как css подключить к html?»

Как сделать фон в виде цвета в CSS?

Для задания цвета фона мы можем использовать несколько форматов:

  1. 1.Кодовое название цвета
  2. 2.Шестнадцатеричный формат:
  3. 3.Формат RGBA, позволяющий не только задавать цвет но и регулировать уровень прозрачности фона и таким образом сделать эффект прозрачного фона.

Уровень прозрачности задаётся в виде десятичного значения от 0 до 1, где 0 – полностью прозрачный, а 1 – не прозрачный.

Уровень прозрачности
Ранее я уже посвящала несколько статей теме задания цветов, их значений и определению цвета на сайте. Уверена, что они могут вам пригодиться. Вот ссылки:
«Изменение цвета шрифта в CSS. Коды цветов HTML и CSS»
«Как определить цвет на сайте»
«Как в html изменить цвет текста?»

Так же вы можете воспользоваться вот этим инструментом для подбора нужного цвета и определения его кода. Просто водите мышкой по палитре, подбираете цвет и справа отображается его значение в шестнадцатеричном формате (HEX) и в формате rgb.

Как сделать фон в виде картинки в CSS?

Для этого нам нужно будет:

  1. 1.К себе на сайт в определённую папку с картинками загрузить изображение, которое мы хотим использовать в качестве фона.
  2. 2.Задать его в CSS

В скобочках указываем путь к картинке.

Путь указывается относительно файла CSS, в котором вы пишете это свойство.

Так же если изображение у вас небольшое то будьте готовы увидеть такую картину:

Не подходящий размер

Вы можете отключить повторение фона для маленьких изображений, дописав no-repeat:

Так же можно сделать чтобы он повторялся только по горизонтали:

Или только по вертикали:

Кроме того мы можем управлять расположением фонового изображения для элемента. Для этого нам нужно дописать следующе:

  • top – для выравнивание по верхнему краю
  • bottom — для выравнивания по нижнему краю
  • left – выравниваем по левому краю
  • right – по правому
  • center – выравниваем по центру (можно использовать как для выравнивания по горизонтали так по вертикали)

Так же можно сочетать эти выравнивания.

Как растянуть фоновое изображение под размер элемента?

По умолчанию фоновое изображение не подстраивается под размер элемента. В эпоху адаптивных дизайнов это доставляет много неудобств. Для решения этой проблемы можно использовать свойство background-size.

  • background-size: 100% auto; — растянет изображение по горизонтали, а по вертикали размер будет увеличиваться пропорционально чтобы не искажалось изображение.
  • background-size: auto 100%; — растягивает по высоте, а по ширине размер пропорционально масштабируется.
  • background-size: 100% 100%; — растянет картинку по горизонтали и вертикали, при этом изображение может деформироваться.
  • background-size: contain; — изображение будет масштабироваться под размер блока насколько это возможно без искажения.
  • background-size: cover; — картинка масштабируется чтобы хотя бы одна из сторон была по размеру элемента и не искажалась.

Как изменить расположение фона внутри элемента?

Кроме описанных выше значений top, bottom, left, right и center мы так же можем использовать значения в пикселях, процентах и em чтобы выставить фоновую картинку так как нам нужно.

Воспользуемся свойством background-position:

Позиционирование фона

Изменить положение фона
Вы можете сочетать эти единицы измерения между собой.

Как сделать фон неподвижным при прокрутке?

Если мы делаем фон через CSS то можем сделать его неподвижным при прокрутке. Для этого задаём для блока, к которому у нас применён фон:

Если нужно чтобы он прокручивался меняем fixed на scroll.

Как сделать фон в виде градиента?

Для создания градиентного перехода задаём для нужного элемента свойство background со значением linear-gradient:

Как задать градиент фона

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

Фон с градиентом

Так же можно задавать процентное соотношение цветов, направление градиента и так далее.

Подробнее об этом написано в этой статье: «Градиент CSS3. Примеры использования»

Как сделать сразу нескольких фонов?

Возможности CSS3 позволяют нам одновременно задать в качестве фона для одного элемента цвет и картинку или несколько картинок.

Указываем сначала картинку, после чего ставим запятую и пишем цвет.

Картинка должна стоять на первом месте.
Два фона

Для задания нескольких картинок указываем их через запятую.

При этом для каждого изображения вы можете задавать своё позиционирование.

Как сделать фон в HTML при помощи CSS?

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

Можно воспользоваться атрибутом style и задать фон прямо в HTML файле.

На этом у меня всё. Надеюсь что помогла вам разобраться с тем как сделать фон в HTML и CSS.

Буду рада видеть ваши комментарии! Успехов вам и до встречи в следующих статьях!

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

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

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

comments powered by HyperComments

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

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

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