Как сделать задний фон цветом в html

Как изменить цвет фона и текста веб-страницы?

Для изменения цвета фона применяется свойство background добавленное к селектору body , а для цвета текста используется свойство color , как показано в примере 1.

Пример 1. Изменение цвета веб-страницы

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Цвет фона   Эскапизм устойчиво дает материалистический комплекс, независимо от психического состояния пациента.

Результат данного примера показан на рис. 1.

Рис. 1. Вид страницы, с измененным цветом фона и текста

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

Фон в HTML

Фон для сайта HTML можно изменить как с помощью атрибутов тега body, так и с помощью CSS-стилей, примененных также к тегу body. Рассмотрим оба варианта как сделать фон для сайта.

Меняем цвет фона с помощью HTML

Тег body, как и практически любой HTML-тег имеет свои атрибуты. К атрибутам тега body относятся:

bgcolor — определяет цвет фона для страницы;
background — позволяет задать картинку в качестве фона веб-страницы (подробно этот вопрос рассмотрен в статье: Как сделать фон сайта картинкой HTML);
scroll — управляет отображением полосы прокрутки на странице;
text — задает базовый цвет текста, который будет выводиться на веб-странице;
bgproperties — указывает, будет ли прокручиваться фон вместе со страницей;
link — управляет цветом ссылок по умолчанию на странице;
alink — устанавливает цвет для активной ссылки;
vlink — определяет цвет для посещенной ссылки на странице;
leftmargin/rightmargin — задает отступ контента от левого или правого края окна браузера;
topmargin/bottommargin — задает отступ контента от верхнего или нижнего края окна браузера;

Чтобы изменить цвет фона с помощью HTML, воспользуемся атрибутом bgcolor:

  Меняем фон сайта с помощью HTML - Нубекс  Это пример текста белого цвета, заданного с помощью атрибута text тега body.

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

Меняем цвет фона страницы с помощью CSS

Во избежании избыточности кода, рекомендуется всё, что связано с оформлением страницы, переносить на плечи CSS. К этому числу относится и задание цвета фона. CSS фон задается следующим образом:

  Меняем фон сайта с помощью CSS - Нубекс body Это пример текста белого цвета, заданного с помощью background CSS. Фон страницы также задан с помощью CSS.

В конструкторе сайтов «Нубекс» для любого сайта можно выбрать уже готовый фон из большой билиотеки изображений, или добавить свой.

HTML фон страницы, цвет фона и картинка

Существуют параметры, которые нам позволяют определить HTML фон для сайта.

Цвет фона HTML страницы определяется CSS атрибутом background-color , который, в свою очередь, размещается внутри тега .
HTML цвет фона для отдельных элементов: блока, параграфа или ячейки таблицы определяется тем же атрибутом, расположенном внутри соответствующих тегов.
Фон HTML страницы может быть определен во внешнем .css файле → подробнее CSS уроках.
HTML картинка — фон определяется с помощью атрибута background-image и картинки.

Цвет фона HTML страницы и отдельных элементов

Определяем цвет фона для сайта, страниц и параграфов

Сделаем фон HTML страницы светло-зеленым:

HTML фон

Заголовок 1-го уровня

Первый параграф

Второй параграф

Третий параграф

Строка style=»color:Yellow; background-color:#66cc66″ в теге делает цвет фона HTML страницы зеленым, текст – желтым.

HTML фон страницы

Посмотреть в новом окне: цвет фона в HTML

Атрибуты style=»» со значениями – линейные CSS включения.

Определим цвет фона для параграфов:

Первый параграф

Второй параграф

HTML картинка — фон или изображение в качестве фона

HTML фон — картинка определяется с помощью изображения

Например, у нас есть вот такая картинка:

Картинка фон хтмл

Напишим следующий код для отдельной страницы:

Картинка — фон в HTML

Какой-то произвольный текст.

Посмотреть результат в новом окне: HTML фон — картинка

Атрибуты background, background-image , их параметры и значения рассматриваются в уроках CSS. Путь вывода картинки на страницу, то есть → ../images/primer-img.jpg разбирается в одном из следующих уроков.

Исходный код HTML страницы

Исходный код H₂O выглядит так:

H₂O

Обратите внимание на порядок открытия и закрытия тегов: одна пара вкладывается в другую, то есть тег открытый первым – закрывается последним, второй – предпоследним.

Исходный код любой web-страницы открывается следующим образом: в меню браузера заходим в View ⇒ Source или Page Source .

Исходный код доступен только для просмотра, но не для редактирования.

Исходный код HTML-страницы

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

HTML линии Цвет HTML фона, исходный код HTML картинка

Цвет фона

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

Цвет фона веб-страницы задается с использованием атрибута bgcolor тега .

Пример 1. Изменение цвета фона

    Цвет фона  .

Цвет можно указывать в шестнадцатеричном значении или по его имени.

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

Фоновый рисунок

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

Пример 2. Добавление фонового рисунка

    Фоновый рисунок  .

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

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

Пример 3. Использование фонового рисунка и цвета фона

    Цвет фона  .

Фиксированный фон

По умолчанию, при использовании полосы прокрутки, фоновый рисунок перемещается вместе с содержимым веб-страницы. Internet Explorer позволяет сделать фон неподвижным с помощью атрибута bgproperties =» fixed » тега .

Пример 4. Задание фиксированного фона

При указании атрибута bgproperties , как показано в примере 4, фоновый рисунок на веб-странице будет оставаться неподвижным, а текст, рисунки и другие элементы станут перемещаться вместе с полосой прокрутки.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.