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

Веб-страница с фоном, как правило, выглядит краше, чем без него. От грамотных действий по добавлению фона зависит правильность отображения веб-страницы.
Инструкция
1
Самый простой способ сделать фон в html-документе - прописать значение атрибутов к тегу body. Заданное значение атрибута background будет определять фоновый рисунок на странице. Если же задать значение атрибута bgcolor, то страница приобретет фоновый цвет. Цвет в атрибуте bgcolor тега body можно указывать как в шестнадцатеричном варианте, так и просто одним словом.
2
Можно добиться того же самого эффекта, воспользовавшись каскадными таблицами стилей CSS. Значение атрибута background-color определит фоновый цвет на странице, в то время как задание значения атрибуту background-image будет определять путь к фоновому рисунку страницы. Эти инструкции можно прописать на селектор body. Можно поступить и по-другому: в html тегу body присвоить класс или идентификатор, а в css указанные выше атрибуты прописать классу или идентификатору соответственно. Следует только иметь в виду, что если атрибуты будут прописаны классу, то в html-документе фоновый цвет будут иметь все объекты с указанным классом.
3
Указанные выше инструкции можно написать в самом теле html-документа. Для этого в служебной секции между тегами head (открывающим и закрывающим) открыть тег style. Между открытием и закрытием данного тега можно писать любые инструкции CSS. Следует только учитывать, что в этом случае вес страницы увеличится, что может негативно сказаться на времени ее загрузки у конечного пользователя. Также следует учесть, что в случае указания фоновой картинки, ее можно повторять по горизонтали, вертикали или по двум осям сразу. За это отвечает атрибут background-repeat в CSS. Фоновая картинка может быть жестко закреплена вне зависимости от наличия полосы прокрутки в документе. Для достижения такого эффекта следует указать background-attachment: fixed.
4
Фон у html-документа можно сделать, прибегнув к языкам программирования. Можно прописать инструкции html с помощью JavaScript. Для этого подойдет языковая конструкция document.write. Если то же самое выразить через модель DOM, то инструкция document.body.style.backgroundColor = “red” сделает фон страницы красным. Это равносильно прописыванию соответствующего атрибута напрямую в CSS.
5
Предыдущие инструкции можно прописать прямо в коде веб-страницы, создав пару тегов script между открывающим и закрывающим тегом head. Однако можно все эти указания записать в отдельный файл с расширением js, который, впоследствии, подключить к странице.

Совет 2: Как в html задать фон

Наиболее распространенным языком гипертекстовой разметки сегодня является HTML. Кроме широкого набора средств для определения структуры документа, он имеет возможности изменения их визуального представления. Например, задать фон гипертекстового документа и его элементов можно различными способами.
Вам понадобится
  • - возможность редактирования HTML-документа.
Инструкция
1
Для того чтобы в HTML задать цвет фона всего документа, таблиц, а также их строк, ячеек заголовков и ячеек содержимого, используйте атрибут bgcolor элементов BODY, TABLE, TR, TH, TD соответственно. Данный атрибут принимает значение, кодирующее цвет пространства SRGB, выраженное в виде шестнадцатеричного числа с предшествующим знаком диеза или символьной мнемоникой. Например:<BODY bgcolor="#008000"><TABLE bgcolor="green">
2
Используйте атрибут background элемента BODY, чтобы определить изображение, которое будет являться фоном всего документа:<BODY background="bgimage.gif">В соответствии с принципом разделения структуры и механизмов определения визуального представления гипертекстовых документов, вместо атрибутов HTML-элементов (как это описано в шагах 1 и 2) рекомендуется использовать таблицы стилей.
3
Задайте цвет фона любого элемента при помощи свойства background-color CSS. Используйте атрибут style для определения встроенной информации о стиле элемента или добавьте наборы правил с подходящими селекторами в таблицы стилей:<div style="background-color: #00FF00">зеленый фон</div>BODY { background-color: #00FF00; }
4
Определите фоновое изображение любого элемента или группы элементов с помощью свойства background-image CSS. Его значением должен является URI, идентифицирующий соответствующий ресурс. Например:<div style="background-image: url('myimage.gif')">фон-картинка</div>BODY { background-image: url("myimage.gif") }
5
Задайте дополнительные правила отображения фонового изображения элементов документа. Используйте CSS свойства background-repeat, background-attachment и background-position. Первое из них определяет параметры мозаичного дублирования, второе - фиксацию относительно документа или окна просмотра, а третье - начальное смещение или выравнивание относительно границ контейнера. С возможными значениями данных свойств ознакомьтесь в спецификации CSS2 на сайте w3c.org.
Видео по теме
Источники:
  • как в html сделать фон картинкой
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500