Получите бесплатно 4 курса для лёгкого старта работы в IT
Получить бесплатно
ГлавнаяБлогКак сделать фон в html: порядок действий
Как сделать фон в html
175 585
Время чтения: 14 минут

Как сделать фон в html: порядок действий

175 585
Время чтения: 14 минут
Сохранить статью:
Сохранить статью:

В статье рассказывается:

  1. Параметры фона сайта
  2. Установка однотонного заднего фона с помощью html
  3. Рисунок или фотография в качестве фона
  4. Создание текстурного фона
  5. Установка фона с помощью градиента
  6. Изменение вида и цвета текста
  7. Пройди тест и узнай, какая сфера тебе подходит:
    айти, дизайн или маркетинг.
    Бесплатно от Geekbrains

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

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

Параметры фона сайта

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

Параметры фона сайта
Параметры фона сайта

В этой статье мы рассмотрим, как сделать фон в HTML. Для начала стоит решить, будет ли страница сайта иметь фиксированные размеры или она станет растягиваться на всю ширину монитора. Желательно, чтобы дизайн вашего интернет-ресурса также красиво отображался на больших экранах с высоким разрешением. При этом важно, чтобы страницы не выглядели сильно растянутыми.

Часто вебмастера подбирают шаблоны для сайта таким образом, чтобы видимая часть страницы не превышала по ширине 1024 символов. По нашему опыту, такое разрешение подходит большинству интернет пользователей.

Есть два варианта, как сделать задний фон в HTML. Это может быть монотонная цветная подложка или изображение. Каждый вариант имеет свои недостатки и преимущества. Монотонный оттенок не будет «утяжелять» ресурс загрузкой лишних картинок, но фон в виде эффектного изображения добавит бонусов дизайну сайта.

Узнай, какие ИТ - профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Павел Симонов - исполнительный директор Geekbrains
Павел Симонов
Исполнительный директор Geekbrains
Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.
Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов - исполнительный директор Geekbrains
Павел Симонов
Исполнительный директор Geekbrains
pdf иконка

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

doc иконка

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

pdf иконка

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

pdf 3,7mb
doc 1,7mb
Уже скачали 29155 pdf иконка

Какими параметрами определяется HTML фон страницы.

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

Подробнее рассмотрим каждый способ установки фона на страницах сайта.

Установка однотонного заднего фона с помощью html

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

Прежде всего, раскроем особенности изменения фона страниц в HTML.  Чтобы установить цветовой оттенок, применяют свойство background-color в стилевом атрибуте style. Таким образом, задать фоновый цвет сайта можно прописав его характеристики в тег <body>. К примеру:

<body style=»background-color: #55D52B»>

<p>Фон сайта #55D52B</p>

</body>

Помимо 16-теричного кода оттенка можно задать цвет фона в виде ключевого слова или RGB. Пример:

<body style=»background-color: rgb(51,255,153)»>

<p>Фон сайта rgb(23,113,44)</p>

</body>

Отметим, что в сравнении с двумя другими вариантами, при установке цвета фона в формате ключевого слова есть несколько ограничений. В html для того, чтобы задать цвет могут применяться только шестнадцать ключей. К примеру, white, red, blue, black, yellow и др. В связи с имеющимися ограничениями мы рекомендуем для установки HTML фона сайта применять16-теричного кода или RGB.

Вы сумеете не только установить цвет фона, но и сделать еще ряд настроек.

Рисунок или фотография в качестве фона

Остановимся также и на возможностях языка гипертекста для такой задачи, как сделать изображение фоном в HTML. Существует 3 варианта установки картинок для фона страницы только с применением HTML + CSS (JS не используется).

Дарим скидку от 60%
на обучение «Веб-разработчик» до 28 июля
Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей
Забронировать скидку

Но сперва определим основные требования к фоновой картинке:

  • Изображение должно покрывать всю ширину и высоту страницы сайта.
  • В случае необходимости фон может масштабироваться (background растягивается/сжимается с учетом параметров экрана).
  • Пропорции изображения сохраняются (aspect ratio).
  • Картинка центрируется на странице.
  • Фоновой изображение не вызывает скроллов.
  • Решение полностью кроссбраузерное.
  • Не применяются разные технологии, только CSS
Установка однотонного заднего фона с помощью html
Установка однотонного заднего фона с помощью html

Метод 1

Наиболее простой и прогрессивный способ, как сделать фото фоном в HTML. В этом случае используется свойство CSS3 background-size, в применении к тегу html. Тег body не применяется, потому что он имеет большую высоту, которая определяется высотой окна браузера. Вначале нужно установить центрированную и фиксированную картинку фона, а потом изменить ее размер с помощью background-size: cover.

html {

background-image: url(images/background.jpg);

background-repeat: no-repeat;

background-position: center center;

background-attachment: fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

Copy

Этот способ можно использовать в любой версии Chrome, Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Метод 2

В этом варианте применяется элемента img. Его размер можно изменить с учетом размеров браузера. Для растягивания картинки фона на полный экран следует задать для фона min-height и width с параметром 100%.

Если установить min-width со значением, которое аналогично ширине изображения, то фон будет сжиматься меньше оригинального размера изображения. Для ситуации, когда окно уже ширины картинки, чтобы выровнять бэкграунд по центру устанавливают media query.

<img src=»/images/background.jpg» class=»background» />

Copy

img.background {

min-height: 100%;

min-width: 640px;

width: 100%;

height: auto;

position: fixed;

top: 0;

left: 0;

/* Определяется размером картинки */

@media screen and (max-width: 640px){

img.bg {

left: 50%;

margin-left: -320px;

}

}

}

Данный метод эффективен любых версиях обычных браузеров (Chrome, Opera, Firefox, Safari), IE 9+

Метод 3

Еще один способ, как сделать изображение фоном в HTML. Нужно закрепить изображение <img /> на странице вверху слева и растянуть его, используя свойство min-width и min-height 100% (необходимо сохранить соотношение сторон).

Отметим, что при таком решении изображение не центрируется. Чтобы центрировать картинку ее нужно завернуть в <div />, сделав его в 2 раза большим, чем размеры окна. При этом, саму картинку растягиваем и устанавливаем по центру.

<div class=»background»>

<img src=»/images/background.jpg» />

</div>

Copy

div.background {

position: fixed;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

}

img {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

min-width: 50%;

min-height: 50%;

}

Данный метод также может использоваться в хороших браузерах и IE 8+.

Создание текстурного фона

Если сделать фон страницы в HTML в виде красивого рисунка, то за «красоту» приходится платить большим весом изображения, который может составлять несколько мегабайт.

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

Создание текстурного фона
Создание текстурного фона

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

К примеру, чтобы установить темный фона для страницы заходим в «Фотошоп» и создаем картинку в форме полоски, длина которой 1,2 тыс. пикселей, а шириной 15 пикселей. После этого используем простой черно-белый градиент, а затем сформированную текстуру устанавливаем на сайт:

<body style=»background-image: url(1.png);color: rgb(0,51,204)»>

Стоит сделать подложку сайта более разнообразной, что будет привлекательным для пользователей. Несмотря на то, что текстуры кажутся очень простыми, они довольно красиво смотрятся, что и объясняет их популярность. Для установки на сайт текстуру следует выгрузить в папку image. Для этого нужно провести некоторые операции с настройками в административной панели сайта. Необходимо внести код:

body {

background-color: #537759;

background-image: url(images/pattern.png);

}

Как вы видите, в таком коде присутствует параметр по установке оттенка (зеленый) и параметр, который подключает зеленую текстуру.

Установка фона с помощью градиента

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

body {

background-color: #83C5E9;

background-image: url(images/gradient.jpg);

background-repeat: repeat-x;

}

Только до 22.07
Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней
Список документов:
ТОП-100 площадок для поиска работы от GeekBrains
20 профессий 2023 года, с доходом от 150 000 рублей
Чек-лист «Как успешно пройти собеседование»
Чтобы получить файл, укажите e-mail:
Введите e-mail, чтобы получить доступ к документам
Подтвердите, что вы не робот,
указав номер телефона:
Введите телефон, чтобы получить доступ к документам
Уже скачали 52300

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

Изменение вида и цвета текста

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

<strong> </strong> — такие метаданные применяют, чтобы выделить текст или его часть жирным шрифтом. Можно использовать и тег (<b> </b>).

<em>  </em> — таким способом можно сделать выделение курсивом.

<u> </u> — в этом случае получим подчеркивание выделенного фрагмента.

<s> </s> — тег для перечеркивания текста.

<SUP>  </SUP> — устанавливает верхний индекс (х2)

<SUB>  </SUB>  — таким образом создается нижний регистр (Н2О)

<hr> — применяем, если нужно сделать вставку в виде горизонтальной линии.

<font>  </font>  — такие метаданные меняют цвет, размер текста и стиль шрифта.

К примеру, вы решаете, как сделать новый цвет текста в HTML. Чтобы вместо черного шрифта получить зеленый или красный, для тега <body> применяется атрибут text. Чтобы задать цвет текста устанавливаем название оттенка <body text=»green»> или цифровой код <body text=»#cc0000″> (красный цвет). К примеру:

<html>

<head>

<title>для изменения цвета устанавливаем атрибут text</title>

<meta http-equiv=»content-type» content=»text/html; charset=Windows-1251″>

</head>

<body text=»green»>

Потом идет текстовый блок страницы, таблицы, картинки и т.д.

</body>

</html>

После таких изменений текст получится зеленым.

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

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

<html>

<head>

<title>HTML фон</title>

</head>

<body style=»color:Yellow; background-color:#66cc66″>

<h1>Заголовок первого уровня</h1>

<p>1-й параграф</p>

<p>2-й параграф</p>

<p style=»color:#ffffff»>3-й параграф</p>

</body>

</html>

В строке style=»color:Yellow; background-color:#66cc66″  теге <body> меняет фоновый цвет HTML страницы на зеленый, а текст получится желтым.

Изменение вида и цвета текста
Изменение вида и цвета текста

При необходимости, есть возможность выделять цветами отдельные параграфы. Сделать это можно так:

<p style=»background-color:#ff9900″ align=»center»>Первый параграф</p>

<p style=»background-color:#417ed0″ align=»center»>Второй параграф</p>

Вы узнали, как сделать фон в HTML и выделить фрагменты текста. Это совсем несложно, стоит только разобраться в некоторых тонкостях.

Оцените статью
Рейтинг: 2.59
( голосов 27 )
Поделиться статьей
Добавить комментарий

Сортировать:
По дате публикации
По рейтингу
До конца акции осталось
0 дней 00:00:00
Дарим скидку 64% на обучение «Разработчик»
  • Получите новую профессию с гарантией трудоустройства
  • Начните учиться бесплатно, 3 месяца обучения в подарок
Забронировать скидку на обучение
Забрать подарок

Получите подробную стратегию для новичков на 2023 год, как с нуля выйти на доход 200 000 ₽ за 7 месяцев

Подарки от Geekbrains из закрытой базы:
Осталось 17 мест

Поздравляем!
Вы выиграли 4 курса по IT-профессиям.
Дождитесь звонка нашего менеджера для уточнения деталей

Иван Степанин
Иван Степанин печатает ...