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

Всем привет. На связи coderistu.ru

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

Итак, поехали.

Допустим, у нас есть блок c произвольным бэкграундом, поверх которого нам надо сделать css затемнение фона:

Разметка блока:

Затемнение фона

CSS — стили

На этом все. Надеюсь, что статья была вам полезной! СКАЧАТЬ

Продолжим изучение CSS. В данном уроке css мы пройдем одну из важных тем — тему изучения работы с фоном через CSS. Это может быть фон всего документа (всей html-страницы) или фон какой нибудь таблицы то есть все, что связано с фоном через css мы сейчас и рассмотрим.

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

Фоновый цвет задается свойством background-color и прописываем значение цвета.

Пример:

body {

background-color:#f2f2f2;

Название и код цвета

Цвет Название Код цвета Цвет Название Код цвета
Белый white ffffff Розовый fuchsia ff00ff
Бирюзовый agua 00ffff Светло-серый silver c0c0c0
Голубой teal 008080 Синий blue 0000ff
Желтый yellow ffff00 Сиреневый purple 800080
Зеленый lime 00ff00 Темно-зеленый green 008000
Красный red ff0000 Темно-серый gray 808080
Малиновый maroon 800000 Темно-синий havy 000080
Оливковый olive 808000 Черный black 000000

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

Пример:

body {

background-image:url(имя файла);

}

Если файл изображения находится в той же папке, что и таблица стилей, то в круглых скобках прописываем только имя файла, который мы выбрали для фона. И так же заметьте, что размер нашего фонового изображения может быть 100×100px, а замостить фоном мы можем всю страницу, какой бы большой она ни была.

Если, после установки фона, плохо виден текст страницы необходимо подкорректировать цвет текста.

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

Происходит это следующим образом: по умолчанию браузер начинает заполнять страницу изображением с левого верхнего угла и движется до правого края (заполняя первый верхний ряд).

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

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

Теперь давайте заполним фон картинкой не с текстурным изображением, а с каким нибудь конкретным рисунком. Файл берем небольших размеров.

Пример:

body {

background-image:url(имя файла 2);

}

Фон нашей страницы — повторяющееся изображение нашей картинки.

Так же мы можем сами решать как нам разместить на странице наше фоновое изображение. В этом нам поможет свойство, отвечающее за тиражирование фонового изображения — background-repeat (повторение фона).

Значения, которые может принимать это свойство:

repeat-x — повторять фоновое изображение только по оси X

repeat-yповторять фоновое изображение только по оси Y

no-repeat — вообще не повторять

Сделаем наше изображение по оси Y:

Пример:

body {

background-image:url(имя файла 2);

background-repeat:repeat-y;

}

Наше изображение повторяется только по оси Y (по левому краю страницы).

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

Что бы браузер начал тиражирование изображения с верхнего правого угла применяем свойство background-position с указанием двух параметров: top — сверху, right — справа.

Пример:

body {

background-image:url(имя файла 2);

background-repeat:repeat-y;

background-position:top right;

}

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

Пример:

body {

background-image:url(имя файла 2);

background-repeat:no-repeat;

background-position:top right;

}

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

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

Используя свойство background-attachment с параметром fixed наше фоновое изображение при прокручивании страницы будет оставаться на месте.

Пример:

body {

background-image:url(имя файла 2);

background-repeat:no-repeat;

background-position:top right;

background-attachment:fixed;

}

Фоновое изображение теперь зафиксировано в правом верхнем углу браузера (не страницы).

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

Пример:

body {

background-image:url(имя файла 2);

background-repeat:no-repeat;

background-position:400px 200px;

background-attachment:fixed;

}

Если убрать свойство background-attachment:fixed;, то фоновое изображение будет закреплено на странице (при прокручивании страницы будет перемещаться вместе со страницей).

Умение применять эти свойства, будет вам очень полезно при создании своих сайтов.

Некоторые пользователи отключают загрузку картинок в своем браузере для ускорения загрузки web-страниц. Если в качестве фона вы используете какое то изображение, то такие пользователи вместо картинки увидят белый фон. Так что выбор за вами, что применить в качестве фона страницы: картинку или фоновый цвет.

Часто страницы сайта делают с фоном в виде картинки. Существует три основных варианта фона: градиент по горизонтали, градиент по вертикали и обычное изображение.

image

Градиент по горизонтали

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

body {   background: url("/images/fon.jpg") repeat-x #e3e3e3; } 

Эта полоса размножится по всей ширине экрана и получится градиентный фон. Вначале идет градиент, а уже потом однотонный цвет, который мы указали в коде.

2. Градиент по вертикали

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

body {   background: url("/images/fon.jpg") repeat-y center #e3e3e3; } 

3. Обычное изображение

Здесь мы просто указываем путь к изображению, которое мы можем отобразить один раз или замостить его по высоте и ширине экрана.

body {   background: url("/images/fon.jpg") no-repeat #e3e3e3; } 

Таким образом, мы показали три способа, как сделать фон картинкой. Безусловно, существуют случаи, когда фон задается по другим правилам. Мы затронули самые основные и популярные варианты.

Привет, друзья!

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

ДЕМО

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

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

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

Пишем в 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 {   color: #fff;   font-family: 'Lobster', cursive;   font-size: 1.9rem;   z-index: 2;   line-height: 3rem;   margin: 0 20%;   text-align: center; }

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

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

[Всего: 1   Средний:  5/5]

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

1Откройте свой HTML файл по средствам блокнота либо любого другого текстового редактора, к которому вы привыкли.

image

2Для примера возьмём примитивную страницу сайта с минимумом текста. Открыть свой файл вы можете с помощью любого браузера.

image

3Для начала измените цвет вашего фона, так как люди с медленным интернет соединением не сразу смогут увидеть фоновое изображение сайта. Некоторое количество времени, пока картинка загружается, они смогут видеть лишь цвет вашего сайта. Впишите в тэг параметр bgcolor=”*****”, где ***** – это шифр цвета. Узнать цвета для HTML вы можете в любом графическом редакторе, выбрав опцию “для вэб” либо на сайте https://colorscheme.ru/color-names

image

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

image

5Подобрав цвет и вставив его в код, посмотрите, всё ли правильно вы сделали, просмотрев получившуюся веб страницу с браузера.

image

6Теперь вы можете приступать к вставке фонового изображения. Поместите желаемую картинку в папку с кодом для большего удобства. Задайте ему имя латинскими буквами.

image

7Теперь узнайте расположение файла, кликнув по нему правой кнопкой мыши, выбрав строку “Открыть с помощью” и кликнув на любой браузер, установленный на вашем компьютере.

image

8Скопируйте адрес из поисковой строки вашего браузера.

image

9Теперь в тэге впишите строку:

  • style=”background-image: url(‘file:///C:/Users/ПУТЬ_ФАЙЛА.jpg’)”

image

10Сохраните свой файл. 11Проверьте свою веб страницу. Вы увидите, что фон подставлен под ваш текст.

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

  • background-repeat: “Значение“. Варианты вашего значения могут быть такими: “repeat-x” – повторяет ваше фоновое изображение и по горизонтали, и по вертикали. “repeat-y” – повторение только по вертикали. “no-repeat” – изображение заморожено на месте и не повторяется. “space” – вся страница заполнится максимальным количеством копий изображения, крайние обрежутся. “round” – такая же опция, но по краям изображения будут аккуратно масштабироваться;
  • background-attachment: “Значение”. Если подставить вместо слова Значение тэг “scroll“, то изображение будет прокручиваться вместе с сайтом. “fixed” – при прокрутке фон остаётся неизменным;
  • background-size: Значение Значение2. Здесь значения должны принимать величину в пикселях. Например: 100px 200px. Кроме пикселей принимаются значения в процентах. Это параметр заполнения страницы изображением. Кроме чисел можно вписать два параметра: “contain” – заполняет страницу изображением по длинной стороне и “cover” – заполняет страницу изображением по ширине.

Зная основы заполнения страницы фоном в HTML вы готовы к созданию своего первого сайта.

Оцените статью
Рейтинг автора
4,8
Материал подготовил
Максим Коновалов
Наш эксперт
Написано статей
127
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий