Menu

Внедрение фона на веб-страницу (Урок №9)

Любая веб-страница наделена фоном, который является либо картинкой, либо каким-то цветом. Фон создается в CSS. Фоном можно наделить всю страницу, либо конкретные его части.

 

1. Создание фонового цвета

Фон обозначается CSS-кодом background. Например, человек хочет желтый фон для сайта! В таком случае для тега <body> необходимо задать желтый цвет: body { background: yellow; }

Приведем пример:

Результат (нажимаем на картинку для увеличения)

 

2. Картинка в качестве фона

Любое изображение может стать фоном. Веб-мастеру чтобы добавить фоновую картинку нужно прибегнуть к помощи этого кода: background-image: url('адрес картинки');

Пример

Результат

Фон картинка

 

Фоновая картинка может повторяться или не повторяться.

  • background-repeat: repeat; – повторение по всей области страницы.
  • background-repeat: repeat-x; – картинка повторяется только по горизонтали.
  • background-repeat: repeat-y; – картинка повторяется только по длине экрана.
  • background-repeat: no-repeat; – картинка не повторяется

 

3. Сочетание нескольких цветов в фоне

Градиент – это плавная смена цветов на веб-странице. Задается градиент при помощи данного кода background: linear-gradient (позиционирование, цвета);

Пример

Результат

градиент фон

background: linear-gradient(to left, red, yellow, green); – цвета идут по горизонтали
background: linear-gradient(to top, red, yellow, green); – цвета идут с низу в верх.

red, yellow, green – это цвета, задействованные в градиенте. Красный, желтый и зеленый. Разработчик страницы может указать свои цвета для градиента.

Таким образом произвести фон можно при помощи градиента, картинки и одинарного цвета.



Подпишитесь!

Укажите свой электронный адрес


Создание абзацев в HTML (урок №3)... Абзацы важная составляющая в статье. Каждый крупный информационный ресурс использует абзацы в тексте. Создание аб...
Заголовки в HTML и CSS (урок N2) Веб-страницу трудно представить без заголовков. На миллионах сайтов расположены заголовки, они встречаются перед статьёй...
Позиционирование текста в HTML и CSS (Урок №8)... Позиционирование текста осуществляется с атрибутом align. Именно этот атрибут определяет в какой стороне будет находится...
Строительство маркированных, нумерованных и картин... Перед просмотром данной статьи рекомендуется изучить начальный урок - https://zavlekyxa.ru/sozdanie-pervoj-html-stra...
Создание первой HTML страницы на своем компьютере ... Создать веб-страницу реально на компьютере. Созданная страница не будет видна в интернете, она будет отображаться только...
Создание “жирного” текста в HTML (урок... Самый распространенный способ привлечение внимания к тексту - это увеличение толщины и яркости букв. Владельцы сайто...
Производство подчеркиваний на веб-странице (урок №... Читая различные статьи на сайтах начинаешь обращать внимание на подчеркивания, выделения и цветовые колебания в тексте. ...
Курсивные буквы в HTML и CSS (урок №7)... Курсивный текст - это буквы, созданные в наклонном стиле. Пример: Прекрасно! Это Прекрасно! Курсивные буквы созда...
Неудача — это возможность начать заново, но уже более мудро. (Генри Форд)