Совет 1: Как залить фон в html

Язык разметки HTML позволяет делать фон страницы однотонным любого цвета, а также размещать на нем изображения. Это дает возможность получить текст, например, на фоне пейзажа или бумажной текстуры.
Инструкция
1
Выбирая цвет фона или изображение для помещения на него, руководствуйтесь в первую очередь читаемостью текста. Фон должен быть контрастным, иными словами, символы должны четко выделяться на нем. Если вы решили сделать фон графическим, обязательно убедитесь в том, что вы являетесь автором изображения либо имеете право на его использования на основании договора (например, свободной лицензии).
2
Найдите в HTML-исходнике страницы тег <body>. Чтобы сделать фон однотонным и цветным, добавьте в него переменную bkcolor с аргументом в виде кода цвета. После этого конструкция будет выглядеть следующим образом: <body bkcolor=rrggbb:gt;, где rr, gg и bb - шестнадцатеричные числа в диапазоне от 00 до FF. Первое из них задает интенсивность красной составляющей, второе - зеленой, а третье - синей.
3
Если же вы желаете поместить на фон изображение, прежде всего, уменьшите его размер таким образом, чтобы оно имело как горизонтальное, так и вертикальное разрешение менее 320 включительно. Сохраните его в новый файл, чтобы не испортить оригинал. Используйте формат JPG, PNG или GIF. Убедитесь, что объем файла не превышает 100 килобайт - так он будет загружаться быстрее. Учтите, что мобильные браузеры могут все равно отображать вместо него однотонный фон.
4
Используя веб-интерфейс либо программный FTP-клиент, поместите файл с изображением в ту из папок сервера, где расположен редактируемый вами HTML-файл.
5
Вместо переменной bkcolor добавьте в тег <body> переменную background с аргументом в виде имени файла с изображением. Теперь он будет выглядеть так: <body background=fon.gif>, где fon.gif - имя файла. Разумеется, если он имеет другой формат, необходимо соответственно изменить его расширение в теге.
6
Загрузите на сервер обновленный вариант HTML-файла. Откройте его в браузере. Убедитесь, что фон отображается правильно. Если на нем находится изображение, оно будет повторяться как по горизонтали, так и по вертикали, заполняя все пространство страницы. Проверьте, насколько хорошо читается текст на новом фоне в различных браузерах. При необходимости используйте другой цвет или графический файл.

Совет 2: Как добавить фон на сайт

Фон в исходном коде веб-страниц, в зависимости от использованного дизайна, может задаваться либо указанием цвета, либо ссылкой на файл изображения с добавлением параметров ее позиционирования. Это может быть сделано непосредственно в HTML-тегах, в отдельном CSS-блоке в заголовочной части исходника или в отдельном файле с описаниями стилей.
Инструкция
1
Откройте исходный код того блока, который используется на вашем сайте для задания фона его страниц. При использовании какой-либо системы управления этот блок, как правило, выделяется в отдельный файл. Сама система управления имеет инструменты для его редактирования непосредственно в браузере. В зависимости от конкретной системы эта процедура может быть организована по-разному - например, через редактор страниц. Если вы не используете системы управления, то соответствующий файл надо скачать к себе в компьютер и открыть в каком-либо редакторе. Лучше использовать специализированный HTML-редактор, но можно пользоваться и самым простым Блокнотом.
2
Добавьте в тег body атрибут bgcolor с указанием цветового оттенка, если фоном страницы должен быть цвет, а не картинка. Например:
<body bgcolor="DarkOrange">
Здесь указан темно-оранжевый цвет в качестве фона. Не любое текстовое («мнемоническое») название оттенка браузер в состоянии распознать, поэтому лучше использовать шестнадцатеричный код цвета. Например, темно-оранжевому цвету соответствует код FF8C00:
<body bgcolor="#FF8C00">
3
Используйте атрибут background вместо bgcolor в теге body, если фон должен быть задан изображением, а не цветом. Например, если файл с фоновым изображением называется bgPic.gif и лежит на сервере в папке images, то тег body может быть записан так:
<body background="url(images/bgPic.gif)">
4
Поместите в заголовочную часть исходного кода описание стилей, если хотите задавать фон страницы с использованием языка CSS. Например, описание стилей на языке CSS, заменяющее указанный в теге body темно-оранжевый цвет в качестве фона, может выглядеть так:
<style type="text/css">

body {background-color: DarkOrange;}

</style>
А задать фоновую картинку можно таким описанием стилей:
<style type="text/css">

body {background: #FF8C00 url(images/bgPic.gif) repeat-y;}

</style>
Здесь кроме ссылки на картинку указан и фоновый цвет (#FF8C00) - если на странице будут места, не закрытые фоновым изображением, то они будут окрашены в указанный здесь цветовой оттенок. Параметр repeat-y задает повторение фонового изображения по вертикали (вдоль оси Y). Если повторять изображение нужно по горизонтали, то следует использовать значение repeat-x, а для запрета повторения рисунка - no-repeat. Поместить описание стилей можно перед тегом </head>, закрывающим заголовочную часть HTML-кода.
5
Сохраните сделанные изменения в редакторе страниц, либо сохраните и загрузите скачанный файл обратно на сервер, если редактирование кода производилось в файле на вашем компьютере.
Видео по теме
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500