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

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

Навигация по статье:

• Как в html сделать фон в виде цвета или картинки?
• Как сделать фон в CSS?
• Как сделать фон в виде цвета в CSS?
• Как сделать фон в виде картинки в CSS?
• Как растянуть фоновое изображение под размер элемента?
• Как изменить расположение фона внутри элемента?
• Как сделать фон неподвижным при прокрутке?
• Как сделать фон в виде градиента?
• Как сделать сразу нескольких фонов?
• Как сделать фон в HTML при помощи CSS?

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

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

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

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

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

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

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

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

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

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

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

< div class = "block" >Это блок , для которого нужно сделать фон < / div > < / li >
background : #ccc;

Если не знаете где и как подключить CSS или хотите дописать CSS стили прямо в HTML, то вам может понадобится эта статья:
«Как css подключить к html?»

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

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

1. Кодовое название цвета

background : blue ;
background : # 013C74;
background : rgba ( 255 , 255 , 255 , 0.5 ) ;

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

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

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

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

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

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

background : url ( images / bg . jpg ) ;

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

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

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

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

background : url ( images / bg . jpg ) no — repat ;

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

background : url ( images / bg2 . jpg ) repeat — x ;

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

background : url ( images / bg2 . jpg ) repeat — y ;

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

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

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

background : url ( images / bg2 . jpg ) no — repeat top 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

Как наложить фон на картинку с помощью CSS? Часто на главной странице сайта или ленинг-пейдж размещают картинку на всю ширину и высоту экрана, а сверху добавляют затемняющий фон, поверх которого в дальнейшем располагается заголовок. Давайте добавим не обычный заголовок, а поздравление с наступающим Новым 2019 годом! ��

Далее в примере я использую картинки с сайта http://lorempixel.com/, чтобы вы могли посмотреть результат в песочнице. Картинки генерируются автоматически, поэтому при каждом изменении кода, будет показываться новая картинка.

Добавим в html-файл следующий код:

 
 
 
С наступающим 
Новым 2019 годом!
 
 

Самое важное, что нужно здесь понимать — позиционирование элементов относительно друг друга.

Пишем в css-файле следующий код:

@import url(‘https://fonts.googleapis.com/css?family=Lobster|Open+Sans&subset=cyrillic’); .wrapper < position: relative; // относительное позиционирование width: 100%; height: 100%; >.wrapper__image < background: url('http://lorempixel.com/400/200/nature/') top center no-repeat; // укажите url к своей картинке background-size: cover; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; z-index: 0; >.wrapper:after < content: ''; background: rgba(0,0,0,0.7); // фон с прозрачностью 70% display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; >.wrapper__title

Вы можете внести изменения и посмотреть на результат в песочнице:

Другой вариант наложения фона в виде снега:

Голосов: 2 , Средняя оценка: 5

CSS-фон

Фон на веб-странице — это очень важно, поэтому для него предусмотрено немало свойств. Все они начинаются словом «Background». В переводе с английского «Background» и означает «Фон». О правилах оформления фона через CSS и пойдёт речь в статье.

background-color

Мы уже говорили о свойстве color, которое позволяет задать цвет переднего плана элемента, то есть букв текста. background-color устанавливает задний фон любого HTML-элемента: таблицы, абзаца, списка и т. д.

Например, цвет фона всей страницы можно настроить так:

body

background-image

Устанавливает в качестве фона картинку. Если изображение подобрано правильно, то страница на его фоне будет выглядеть гораздо красивее, чем на фоне одноцветном.

Например, картинка background.png хранится в той же папке, что и веб-страница, и вы хотите установить её как фон параграфам этого HTML-документа. Код будет таким:

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

Body < background-image: url(”image/background01.png”), url(”image/background02.png”), url(”image/background03.png”), url(”image/background04.png”); >

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

background-repeat

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

Бывают ситуации, когда такое заполнение неприемлемо. Как раз для них и существует свойство background-repeat, которому можно указать следующие значения:

• repeat. Задано по умолчанию. Результат вы видели на рисунке выше.
• repeat-x. Картинка будет повторяться только слева направо, по горизонтали. По вертикали не будет, так что заполнит только первый слой.

• repeat-y. Рисунок будет повторяться по вертикали, но не по горизонтали, то есть идти вдоль левой границы страницы.

• no-repeat. Фон не будет повторяться вообще.

background-position

Позволяет задать позицию фоновому изображению, ведь не всегда нужно, чтобы оно отображалось с левого верхнего угла окна браузера. Для позиционирования достаточно указать два значения через пробел: координату по оси X (горизонтальное позиционирование) и координату по оси Y (позиционирование вертикальное). Задавать их можно в любых единицах длины, но для абсолютных значений рекомендуется использовать пиксели (px), а для относительных — проценты (%).

background-position: 200px 350px;

Также картинку можно позиционировать зарезервированными словами.

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

Свойство background-repeat позволяет устанавливать в качестве фона несколько картинок и задавать правила так, чтобы изображения не накладывались друг на друга. Чтобы это сделать, достаточно перечислить пары координат для всех фоновых рисунков в одном правиле. Например, позиционировать три картинки можно так:

background-position: center left, 0% 50%, 800px 0px;

background-attachment

Определяет, будет ли фоновая картинка прокручиваться вместе с содержимым страницы или будет оставаться неподвижной. Значения могут быть такими:

• fixed — фон зафиксирован.
• scroll — фон разблокирован (прокручивается)
• local — рисунок прокручивается только с содержимым элемента, но дальше, если элемент уже закончился, не идёт.

Если изображений несколько, для них можно указать правила, перечислив их в одном свойстве background-attachment через запятую:

background-attachment: fixed, scroll, local;

background-clip

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

• content-box — фон отображается только под содержимым.
• border-box — выводится и под контентом, и под границами.
• padding-box — отображается внутри границ.

background-origin

То же, что и background-clip, с такими же значениями, только задаёт положение относительно границ не текущего элемента, а элемента-родителя.

• content-box — фон располагается относительно контента родительского элемента.
• border-box — фон позиционируется относительно границы родителя, при этом рамки могут фон перекрывать.
• padding-box — фон отображается до границ элемента-родителя, при этом границы на него не заходят.

background-size

Свойство указывает браузеру размеры фонового изображения. Вы можете задать их в любых единицах длины (через пробел указывается сначала ширина, потом высота картинки). Если прописано только одно значение, то оно определит ширину, высота при этом останется исходной, то есть такой, как в файле изображения. Чтобы указать только высоту, а ширину оставить оригинальной, свойству background-size нужно задать значения auto размер (например, background-size: auto 300px).

В правиле можно использовать ещё два значения.

• cover. Масштабирует фон по размерам блока с сохранением исходных пропорций картинки, то есть рисунок не растянется и не станет слишком узким.
• contain. Помещает изображение внутрь блока, сохраняет пропорции.

background

Позволяет объединить значения перечисленных свойств в одной строке:

background: url("background.jpg") center center / 100px 100px no-repeat content-box;

В примере между свойствами background-position и background-size стоит слеш (/), которым их значения друг от друга необходимо отделять, дабы не запутывать браузер.

Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.

Полезные ссылки:

• Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
• Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
• Вёрстка сайта с нуля 2.0 — полноценный платный курс;
• Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Как добавить оверлей (затемнение) на фоновое изображение

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

Способ 1: Использование псевдоэлемента

Один из способов добавить оверлей на фоновое изображение – использовать псевдоэлемент ::before или ::after . В этом случае создается «виртуальный» элемент, который накладывается поверх фонового изображения и затемняет его.

 
Текст поверх изображения
 
 

.image-with-overlay < position: relative; background-image: url('path/to/your/image.jpg'); background-size: cover; background-position: center; >.image-with-overlay::before < content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Здесь можно изменить цвет и степень затемнения */ z-index: 1; >.image-with-overlay > *

В этом примере мы создаем псевдоэлемент ::before , задаем ему абсолютное позиционирование и полупрозрачный черный фон. Текстовый контент внутри блока получает больший z-index для отображения поверх оверлея.

Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

Способ 2: Использование линейного градиента

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

 
Текст поверх изображения
 
 

.image-with-gradient-overlay < background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('path/to/your/image.jpg'); background-size: cover; background-position: center; >

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

Теперь вы знаете два способа добавления оверлея на фоновое изображение с помощью CSS! �� Не забывайте экспериментировать с цветами и степенью затемнения для создания уникального вида вашего сайта.

Если вы хотите углубить свои знания в веб-разработке, рекомендуем обратить внимание на