8 800 550 54 53

Прием звонков: с 09:00 до 21:00 (мск).

Без выходных.

Заказать

Прием заказов:

круглосуточно.

Как делать графический фон на web (html) странице и других объектах

Страница создана: , обновлена:

Обучаемся создавать первую свою WEB страничку

Создавая наши 1-ые WEB странички, мы использовали для их однотонный фон, указывая его цвет в теге <body> при помощи атрибута bgcolor. Но фон может быть не только лишь однотонным, но также в виде рисунка либо фото. В данном случае, как и хоть какое другое изображение, набросок фона должен быть представлен в формате GIF, JPEG либо PNG. Для указания фонового рисунка в теге <body> употребляется атрибут background, значение которого - имя либо URL адрес файла с рисунком.

Вставим в файл other.html в качестве фона WEB странички набросок winner.jpg, который мы сохранили в папке WEB в прошлом опыте.

В файле other.html, удалите HTML элемент <img src="http://other.narod.ru/winner.jpg">.

Добавьте в конец открывающего тега <body> стиль background-image:url('winner.jpg'); так, чтоб тег <body> принял последующий вид:

<body style="background-image:url('winner.jpg');">

В окне браузера вы увидите, что сейчас фон этой странички не однотонный голубой, как до этого, а изображение из загруженной нами фото, записанной в файле winner.jpg. И на этом новеньком фоне отображается текст документа и набросок image.gif. Но напомним, что мы не удалили атрибут bgcolor в теге <body>. В таких случаях, когда в теге <body> указываются оба атрибута - bgcolor и background - браузер обычно дает предпочтение атрибуту background, но, если изображение фона загрузить нереально, употребляется атрибут bgcolor.

Фон на WEB страничке через CSS

Очередной метод определения фона - при помощи языка каскадных таблиц стилей CSS. Как вы на данный момент увидите, этот метод предоставляет разработчику WEB странички существенно больше способностей управления фоновым изображением. Чтоб удобнее было знакомиться с ними, вставим набросок winner.jpg в качестве фонового изображения второй WEB странички нашего WEB сайта, сохраненной в файле list.html, воспользовавшись языком каскадных таблиц стилей.

Ранее мы обусловили вид текста на первой WEB страничке при помощи языка каскадных таблиц стилей, указав нужные стили как значения атрибута style в теге <р>. Но есть другой, более желательный вариант определения стилей, при котором описание стилей размещается внутри заголовка WEB документа <head>…</head> в открывающем теге <style>. В таком случае вы сможете использовать описанные стили для HTML частей всей странички.

Вставка стиля в html

В теге <style> непременно должен находиться атрибут type="text/css", который служит указанием браузеру использовать язык каскадных таблиц стилей CSS. Таким способом, элемент <style>…</style> обязан иметь последующий вид:

<style type="text/css"> </style>

Вставим этот тег в код HTML файла list.html.

Воткните пустую строчку в файле list.html после элемента <title>Чем мы увлечены?</title> и введите теги <style></style>, как обозначено выше. Код HTML заголовка WEB странички, заключенный меж тегами <head>…</head>, обязан иметь таковой вид:

<head>

<title>Чем мы увлечены?</title> <style type="text/css">

</style>

</head>

Последующее, что необходимо сделать - это присвоить стили элементам HTML. В общем случае присвоение стиля элементу смотрится так:

название_элемента {свойство: значение}:

где название_элемента - это имя HTML тега, к примеру, h1, р, body, а характеристики в фигурных скобках - список параметров частей и присвоенных им значений. К примеру, чтоб указать, что все абзацы, описываемые тегами <р>…</р> текущего WEB документа, обязаны иметь полужирное курсивное начертание шрифта с размером 150% и выравнивание по центру, следует присвоить этому элементу стили последующим образом:

<style type="text/css">

р {font-weight: bold; font-style: italic; font-size: 150%; text-align: center}

</style>

Напомним, что такие стили мы присвоили элементу <р>…</р> на нашей первой WEB страничке - other.html - и сделали это при помощи атрибута style. При всем этом стили были присвоены только данному элементу <р>…</р>. Если же стили определяются в заголовке документа обозначенным выше методом, то они присваиваются всем элементам <р>…</р> данной странички.

Вставка стиля и изображения в тег body через css

Но нам требуется воткнуть набросок, который будет служить фоном WEB странички. Для этого в теге <style> элементу body должно быть присвоено свойство background-image, значением которого должен быть URL адрес файла с изображением. Этот адресок в языке таблиц стилей указывается в скобках после знаков url так: url ("winner.jpg"). На основании произнесенного, элементу body в теге <style> необходимо присвоить последующий стиль:

body {background-image: url("winner.jpg")}

Воткните пустую строчку меж открывающим тегом <style> и закрывающим тегом </style> и введите обозначенный код, определяющий стиль элемента body.

Элемент HTML <style>…</style> должен смотреться последующим образом:

<style type="text/сss">

body {background-image: url("winner.jpg")} </style>

Сохраните файл list.html и откройте его в программе-браузере. Вы увидите, что установленный вами ранее цветной фон заменен изображением из файла winner.jpg и текстовое содержимое документа отображается сейчас на новеньком фоне.

Если текст плохо виден на новеньком фоне, измените его цвет при помощи атрибута text тега <body>, к примеру, <body text="black">.

Когда вы просмотрите текущий документ, воспользовавшись вертикальной полосой прокрутки, то увидите, что в нижней части странички фоновое изображение повторяется. Если у вас установлено разрешение монитора 1024 x 768 либо выше, то повторение будет и справа. Во всех случаях, когда размер фонового рисунка меньше размера текущей странички, браузер по умолчанию повторяет набросок по вертикали и по горизонтали. Но вы сможете указать программке просмотра не повторять набросок, другими словами выводить его только один раз. Для этого употребляется свойство background-repeat со значением no-repeat: background-repeat: no-repeat.

Воткните обозначенное свойство в код HTML файла list.html так, чтоб элемент <style>…</style> принял последующий вид:

<style type="text/сss">

body {background-image: url("winner.jpg"); background-repeat: no-repeat} </style>

Размножение фона на WEB (html) страничке

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

Свойство background-repeat может иметь также последующие значения:

repeat - фон повторяется как по горизонтали, так и по вертикали; это значение устанавливается по умолчанию;

repeat-x - фон повторяется только по горизонтали;

repeat-у - фон повторяется только по вертикали.

Положение фонового рисунка на страничке можно поменять при помощи характеристики background-position. В качестве значений этого характеристики указываются ключевики, характеризующие положение изображения по вертикали - top (вверху), center (по центру), bottom (понизу) - и по горизонтали - left (слева), center (по центру), right (справа). Первым должно указываться вертикальное положение. К примеру, код background-position: center center выровняет набросок по центру странички как по горизонтали, так и по вертикали.

Добавьте в описание параметров элемента body файла list.html свойство background-position: center center. Элемент <style>…</style> в этом файле должен принять последующий вид:

<style type="text/css">

body {background-image: url("winner.jpg"); background-repeat: no-repeat; background-position: center center}

</style>

Как сделать фоновый набросок на WEB страничке

Фоновый набросок будет помещен в центре странички, при всем этом нижняя и верхняя части странички, также правая и левая при разрешении монитора 1024 x 768 и выше, будут заполнены сплошным цветом.

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

Вы сможете, но, фиксировать изображение так, чтоб при прокрутке фон странички оставался недвижным, а текст передвигался относительно фонового изображения. Для этого в элементе body следует использовать свойство background-attachment со значением fixed: background-attachment: fixed.

Воткните обозначенное свойство в описание стиля элемента body. Элемент <style>…</style> HTML кода файла list.html должен принять последующий вид:

<style type="text/css">

body {background-image: url("winner.jpg"); background-repeat: no-repeat; background-position: center center; background-attachment: fixed}

</style>

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

Видите ли, внедрение языка каскадных таблиц стилей предоставляет больше способностей для представления фонового изображения на WEB страничке, чем применение атрибута background в теге <body>.

Дополнительная информация по теме

Как вставить (сделать) ссылку на web (html) странице - первый урок

Описание, как собственными силами вставить первую ссылку в текст на web (html) странице

Как размещать звук и видео на web страницах

Особенности размещения объектов мультимедиа на страницах при помощи Microsoft FrontPage 2003

Какой графический формат использовать на своих web страницах

Полное и подробное описание графических форматов используемых в Интернет и что рекомендуется в каких случаях использовать

Как создать список на web странице

Описание, как просто и правильно делаются списки значений на web (html) страницах

Ссылка для обмена:

Ссылка для форума:

Ссылка для сайта:

Есть вопросы, замечания, дополнения? Пишите в комментариях.
Заказать тексты для сайта (онлайн форма) - цена от 60 рублей, срок 24 часа
web-страница, стиль, фон, css, html

Страница: Как делать графический фон на web (html) странице и других объектах

Дата публикации: 2010-11-23 12:05. Последние изменения: 2016-07-14 20:42

наверх