Как поставить фоновое изображение в html. Цвет фона

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

Делаем фон

Перед тем как сделать фон сайта html, нужно открыть в текстовом редакторе код html страницы. Нужно помнить, что теги на странице размещаются вертикально. Затем, между тегами … , нужно поставить тег - эти теги нужны для того, чтобы уточнить стиль элементов данной веб-страницы. На месте трёх точек нужно прописать – body {background:} . Это параметр, благодаря которому можно устанавливать разные стили для фона страницы. Можно сделать операцию по установке цвета двумя способами. Первый:

Body {background:#000000} – теперь фон страницы должен стать чёрного цвета.

Этот способ подходит и для того, чтобы задать и цвет, и картинку фоном. Именно после двоеточия, можно поставить или код цвета или ссылку на картинку. А можно использовать способ, который обозначает только установку цвета – определённой заливки для страницы. После двоеточия нужно прописать так называемый параметр – color. И после него, ставить код самого цвета. Этот способ хорош, если использовать его как шаблон. Прописать его и сохранить, а когда нужно - задать цвет, поставить его на страницу.

Можно поставить, вместо однотонного фона, картинку. Если нужно узнать: в html, как сделать картинку фоном, то операции нужно проделать подобные. Прописать теги, поставить body {background: ссылку на картинку}. Нужно помнить, что сама картинка, может быть где угодно. И на сайте в интернете, но лучше всего создать в корне документа папку. В папке, внутри которой будет сохраняться вся информация о странице сайта, нужно создать ещё одну – для картинок. Операция будет выглядеть так:

Теперь картинка, которую вы выбрали, будет фоном всей страницы сайта. Надеемся, что Вы поняли, как сделать фон в html. Просто попробуйте и все обязательно получится!

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

Структура HTML-файла представляет собой ряд дескрипторов различного уровня и назначения. Код страницы обычно начинается с тега . После него обычно идет секция , в которой указывается заголовок страницы и код CSS. После закрытия дескриптора начинается тело страницы . Атрибут для задания фонового рисунка страницы выставляется в качестве дополнительного параметра background для данного тега. Код для создания фона страницы будет выглядеть следующим образом:

При этом путь до картинки может представлять собой URL (начиная с http://). Размещение может быть задано с корневой директории (/root/folder/background.jpg), так и относительно местоположения редактируемого документа HTML (например, folder/background.jpg).

Сохраните произведенные изменения и откройте страницу в браузере. Для этого кликните правой клавишей мыши и выберите «Открыть с помощью». В предложенном списке укажите наименование используемой вами программы для просмотра страниц в интернете. Если параметр background был задан корректно, вы увидите указанную ранее фоновую картинку. Если картинка не отображается, проверьте правильность указания атрибута background и путь до файла фона.

Параметр bgcolor

Чтобы задать цвет фона без картинки, вы можете воспользоваться директивой bgcolor. В качестве значения для данного атрибута вы можете указать название цвета на английском языке или использовать значение цвета в палитре HTML. Например:

Данный код задает странице синий фон. Если вы хотите задать оттенок цвета или более точный цвет, используйте значения HTML-палитры:

В данном случае #002902 является цветом, который необходимо придать странице.

Атрибуты CSS

Вы также можете задать фон при помощи кода CSS, прописанного в параметрах :

При помощи CSS вы можете указать и фоновый рисунок для страницы через background-image:

Использование CSS и HTML дает одинаковые результаты, однако задавая параметры отображения страницы предпочтительнее использовать CSS.

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

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


Для начала измените цвет вашего фона, так как люди с медленным интернет соединением не сразу смогут увидеть фоновое изображение сайта. Некоторое количество времени, пока картинка загружается, они смогут видеть лишь цвет вашего сайта.
Впишите в тэг параметр bgcolor=”*****”, где ***** – это шифр цвета. Узнать цвета для HTML вы можете в любом графическом редакторе, выбрав опцию “для вэб” либо на сайте https://colorscheme.ru/color-names


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


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


Теперь вы можете приступать к вставке фонового изображения. Поместите желаемую картинку в папку с кодом для большего удобства. Задайте ему имя латинскими буквами.


Теперь узнайте расположение файла, кликнув по нему правой кнопкой мыши, выбрав строку “Открыть с помощью” и кликнув на любой браузер, установленный на вашем компьютере.


Скопируйте адрес из поисковой строки вашего браузера.


Теперь в тэге впишите строку:
  • style=”background-image: url(‘file:///C:/Users/ПУТЬ_ФАЙЛА.jpg’)”


Сохраните свой файл.


Проверьте свою веб страницу. Вы увидите, что фон подставлен под ваш текст.


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

  • background-repeat : “Значение “. Варианты вашего значения могут быть такими: “repeat-x” – повторяет ваше фоновое изображение и по горизонтали, и по вертикали. “repeat-y” – повторение только по вертикали. “no-repeat” – изображение заморожено на месте и не повторяется. “space” – вся страница заполнится максимальным количеством копий изображения, крайние обрежутся. “round” – такая же опция, но по краям изображения будут аккуратно масштабироваться;
  • background-attachment: “Значение”. Если подставить вместо слова Значение тэг “scroll “, то изображение будет прокручиваться вместе с сайтом. “fixed ” – при прокрутке фон остаётся неизменным;
  • background-size: Значение Значение2. Здесь значения должны принимать величину в пикселях. Например: 100px 200px. Кроме пикселей принимаются значения в процентах. Это параметр заполнения страницы изображением. Кроме чисел можно вписать два параметра: “contain ” – заполняет страницу изображением по длинной стороне и “cover ” – заполняет страницу изображением по ширине.

Зная основы заполнения страницы фоном в HTML вы готовы к созданию своего первого сайта.

Урок 7. Цвет текста и фона в HTML.

Дата: 2008-12-05

Как задать цвет фона и текста на web-странице?

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

Задаем цвет текста

В HTML цвет текста, шрифта, фона и других элеменотов можно задать двумя способами:

1. Способ 1-й. В парных тегах прописывается атрибут с указанием названия нужного цвета. Название цвета указывается по английски. Например, цвет заголовка на нашей web-странице можно задать таким способом:


Комментарии к этой статье (уроку):

Андрей! Какой у Вас замечательный сайт! Я уже вторую неделю регулярно им пользуюсь: изучаю Ваши уроки, и видеоуроки; читаю Вашу литературу и скачиваю программы; делаю первые шаги в веб-программировании! И, что самое главное, у меня получается!!! А я ведь совсем не физик, а лирик! И в этом может убедиться каждый, кто посетит мой литературный сайт: " СТИХИ ОЛЕГ ГУЗЬ " Мои реквизиты: электронная почта: [email protected] сайт: http://sites.google.com/site/stihiolegguz/

внимательно проверьте код

Я пробовал изменять цвет фона, и у меня не получается! Как изменить цвет фона?

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

Чтоб такой беды не случилось с я решил написать статью на тему: «Как сделать фон страницы в html». Прочитав публикацию, вы узнаете, с помощью каких инструментов можно задавать фоновое оформление, как сделать фон фиксированным или меняющимся и многое другое, что поможет сделать привлекательным ваш сайт. А теперь начнем!

Основные инструменты для задания фона веб-страниц

Для установки фонового изображения разработчиками веб-языков был предусмотрен атрибут background. Он имеется как в , так и в css.

В языке разметки – это атрибут тега body, а в стилевых таблицах – универсальное свойство, которое позволяет задать до 5 характеристик заднего плана одновременно. Background – достаточно гибкий элемент, который можно использовать для задания фона в виде одного цвета, цветной картинки или даже анимации.

Так, для установки фонового изображения через единицу html достаточно написать такой код: ... и вместо слов «адрес файла» вставить путь к картинке.

Однако заметьте! Если в виде фона вы хотите видеть однотонное полотно, заданное значением из палитры цветов, то это делается при помощи атрибута bgcolor.

Например, ..., мы задали черный фон для нашего сайта.

Цвета в css и html задаются либо английским словом (например, red), либо специальным кодом, который состоит из знака # и шести символов после него (например, #FFDAB9).

При наборе второго варианта в специализированных программных продуктах для разработчиков, палитра автоматически появится перед вами. Если же вы только начали изучать данные веб-языки, то код цвета можно подсмотреть в интернете.

Background как свойство в каскадных стилевых таблицах

Он задается или в отдельном файле с css стилями, или в элементе

Первый текст

Второй текст

background-attachment