Фон для веб страницы html

Фон для веб страницы html

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

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

Результат можно посмотреть здесь.

Теперь рассмотрим, как установить на задний фон картинку.

Для этого вам нужно создать папку "images" в той же директории (общей папке), в которой у вас находятся html страницы. После этого в папку "images" загрузите вот такую картинку:

Теперь что бы эта картинка стала задним фоном вашей html страницы, нужно в теге " " в свойстве
style = " background-image:" ’ прописать путь к этой картинке (url). Так же зададим заголовку некоторые свойства, котырые рассматривались в предыдущем уроке.

Результат работы этого кода можете посмотреть здесь.

Как вы заметили картинки, выбираемая для заднего фона html-страницы, должна быть аккуратно обрезана по краям, что бы после её бесконечного повторения в окне браузера небыли заметны границы и поля. Ну и сама картинка конечно же должна быть какимто повторяющимся узором (как обои) ну или просто нечто монотонным.

Более подробно работа с фоновым изображением рассматривается в уроках по CSS.

HTML теги, определяющие задний фон страницы и его свойства

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

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

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

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

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

Любая комната будет выглядеть намного лучше, если ее пол устилает дорогой персидский ковер. Так чем хуже ваш сайт? Может, пришла пора и его пол « застелить » дорогим изящным паласом ручной работы. Разберемся подробнее, как сделать фон для сайта:

Фон для сайта

Бывает так, что старый дизайн сайта уже приелся. И хочется чего-нибудь новенького и вкусненького. А новый дизайн будет таковым, если его приготовить своими руками.

Но менять полностью весь дизайн ресурса самостоятельно – вещь неблагодарная. Да и не у всех под это дело как надо « заточены » руки. Поэтому легче всего освежить старый шаблон, изменив цвет фона ресурса или его фоновое изображение.

Существует несколько способов того, как поменять фон на сайте. Для этого используются возможности CSS или html . Но многие из свойств для работы с фоном имеют одинаковое название и методику применения в этих веб-технологиях.

Основы работы с фоном в html

В качестве фона можно использовать несколько элементов:

  • Цвет;
  • Фоновую картинку;
  • Текстурное изображение.

Разберемся с применением каждого из них подробнее.

Для того чтобы установить цвет заднего фона для сайта используется свойство background-color стилевого атрибута style . То есть, чтобы задать основной цвет для веб-страницы, нужно прописать его внутри тега . Например:


Кроме шестнадцатеричного кода цвета поддерживается значение в формате ключевого слова или RGB . Примеры:


Установка цвета фона с помощью ключевых слов имеет ряд ограничений по сравнению с остальными двумя способами.

В html поддерживается всего 16 ключевых слов для задания цвета. Вот несколько из них: white, red, blue, black, yellow и другие.

Читайте также:  Как сделать microsoft word программой по умолчанию

Поэтому для того, чтобы установить фон для сайта html , лучше использовать шестнадцатеричный формат или RGB .

Кроме выбора цвета доступны и другие параметры настройки. Если свойству background-color задать значение transparent , то фон страницы станет прозрачным. Это значение данному свойству присвоено по умолчанию.

Теперь рассмотрим возможности языка гипертекста для установки фонового рисунка для сайта. Это возможно сделать с помощью свойства background-image .


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

Предположим, что мы разрабатываем сайт о поэзии, и в качестве подложки нужно использовать изображение Пегаса. Крылатый конь будет олицетворять свободу творческой мысли поэта!

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

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

  • repeat-x – повторение фонового изображения по горизонтали;
  • repeat-y – по вертикали;
  • repeat – по обеим осям;
  • no-repeat – повторение запрещено.

Среди перечисленных вариантов нас интересует последний. Перед тем, как поменять фон сайта, используем его в своем коде:


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

  • Ключевым словом ( top , bottom , center, left, right) ;
  • Процентами – отсчет начинается от верхнего левого угла;
  • В единицах измерения ( пикселях ).
Читайте также:  Не видно подсистему 1с

Воспользуемся самым простым вариантом центрирования:

Бывает, что нужно зафиксировать положение рисунка при прокрутке. Поэтому прежде, как сделать картинку фоном сайта, воспользуйтесь специальным свойством background-attachment . Принимаемые им значения:

  • scroll;
  • fixed.

Нам нужно последнее значение. Теперь код нашего примера будет выглядеть вот так:[/HTML]

Текстурный фон сайта

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

Такой объем никак не влияет на скорость загрузки страницы браузером при высокоскоростном соединении с интернетом. Но как быть с мобильным интернетом, при использовании которого загрузка нескольких « метров » займет много времени?

Все эти проблемы решаются с помощью текстурного фона. В нем в качестве рисунка текстуры используется маленькое изображение. Даже при условии его многократного повторения рисунок загружается лишь один раз.

Для создания темного фона для сайта заходим в Photoshop , создаем изображение в виде полоски длинной 1200 пикселей, и шириной 15 пикселей. Затем применяем простой черно-белый градиент и подключаем получившуюся текстуру к странице сайта:

Для наглядности мы добавили текст и задали его цвет с помощью свойства color . Вот что получилось:

Средства CSS

Все свойства, описанные выше, также применимы и для каскадных таблиц стилей. Создадим фон сайта css , переписав код одного из наших предыдущих примеров:

Результат будет аналогичным.

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

Ссылка на основную публикацию
Фоллаут 76 официальный сайт на русском
Игра Fallout 76 Модификация силовой брони и оружия в честь 300-летия США Голова Волт-Боя Патриотический костюм американца Праздничное приветствие Волт-Боя...
Установка образа на виртуальную машину
VirtualBox представляет собой виртуальную машину с возможностью запустить операционные системы, отличные от установленной на компьютере. Это обычно требуется для тестирования...
Установка образа на жесткий диск
Приветствую вас, друзья. Наверное, каждый пользователь компьютера или ноутбука встречался с ситуацией, когда он понимает, что настало время переустановки операционной...
Фольксваген тигуан 2 литра механика
Все минусы Фольксваген Тигуан 2018-2019 ➖ Качество отделочных материалов ➖ Расход топлива Плюсы ➕ Динамика ➕ Управляемость ➕ Удобный салон...
Adblock detector