Как поменять фон в html css

Цвет фона

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

Цвет фона веб-страницы задается с использованием атрибута bgcolor тега .

Пример 1. Изменение цвета фона

      
.
  

Цвет можно указывать в шестнадцатеричном значении или по его имени.

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

Фоновый рисунок

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

Пример 2. Добавление фонового рисунка

      
.
  

Если изображение меньше размера экрана монитора, оно будет размножено по горизонтали и вертикали.

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

Пример 3. Использование фонового рисунка и цвета фона

      
.
  

Фиксированный фон

По умолчанию, при использовании полосы прокрутки, фоновый рисунок перемещается вместе с содержимым веб-страницы. Internet Explorer позволяет сделать фон неподвижным с помощью атрибута bgproperties =» fixed » тега .

Пример 4. Задание фиксированного фона

При указании атрибута bgproperties , как показано в примере 4, фоновый рисунок на веб-странице будет оставаться неподвижным, а текст, рисунки и другие элементы станут перемещаться вместе с полосой прокрутки.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные материалы

• Самоучитель HTML4
• Самоучитель CSS
• Как добавить картинку на веб-страницу?
• Спецсимволы
• Структура HTML-кода
• Введение в HTML
• Способы добавления стилей на страницу
• Выравнивание текста
• Якоря
• Позиционирование элементов
• Как добавить иконку сайта в адресную строку браузера?
• Ссылки

Как задать цвет фона в HTML

Соавтором этой статьи является Jessica Andzouana, наш постоянный соавтор. Постоянные соавторы wikiHow работают в тесном сотрудничестве с нашими редакторами, чтобы обеспечить максимальную точность и полноту статей.

Количество просмотров этой статьи: 218 587.

В этой статье:

Из этой статьи вы узнаете, как изменить цвет фона веб-страницы, если отредактировать ее HTML-код.

Метод 1 из 4:

Как подготовиться к редактированию HTML-кода

• Перейдите на страницу https://www.w3schools.com/colors/colors_picker.asp в веб-браузере компьютера.
• Выберите базовый цвет, который хотите использовать, в разделе «Pick a Color» (Выбрать цвет).
• Выберите оттенок в правой части страницы.
• Запишите код, который отобразится справа от выбранного оттенка.

• HTML-документ можно открыть в Notepad++ или Блокноте (Windows), а также в TextEdit или BBEdit (Mac).

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

DOCTYPE html> html> head> style> style> head> html> 

Создайте пустую строку между тегами «style». На этой строке, которая должна находиться под тегом

, вы введете необходимую информацию.

Добавьте элемент «body». Введите следующий код между тегами :

body  > 

• Все, что будет заключено внутри элемента «body» в CSS, повлияет на всю страницу.
• Пропустите этот шаг, если хотите создать градиентный фон.

Метод 2 из 4:

Как создать однотонный фон

Найдите заголовок «html». Он должен быть в верхней части документа.

Добавьте свойство «background-color» в элемент «body». Введите background-color: в фигурных скобках внутри элемента «body». Должен получиться следующий код:

body  background-color: > 

• Обратите внимание, что в этом коде необходимо использовать слово «color», а не «colour».

Добавьте нужный цвет фона в свойство «background-color». Справа от «background-color:» введите числовой код выбранного цвета, а затем введите точку с запятой (;). Например, чтобы фон страницы сделать розовым, напишите следующий код:

body  background-color: #d24dff; > 

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

DOCTYPE html> html> head> style> body  background-color: #d24dff > style> head> html> 

Используйте «background-color», чтобы задать цвет фона других элементов (заголовков, абзацев и тому подобных). Например, чтобы задать цвет фона основного заголовка () или абзаца (

), напишите следующий код: [2] X Источник информации

DOCTYPE html> html> head> style> body  background-color: #93B874; > h1  background-color: #00b33c; > p  background-color: #FFFFFF); > style> head> body> h1>Заголовок на зеленом фонеh1> p>Абзац на белом фонеp> body> html> 

Метод 3 из 4:

Как создать градиентный фон

Найдите заголовок «html». Он должен быть в верхней части документа.

Запомните основной синтаксис этого процесса. Чтобы создать градиент, необходимо знать две величины: начальную точку/угол и ряд цветов, которые будут переходить один в другой. Можно выбрать несколько цветов, чтобы они переходили друг в друга; также можно задать направление или угол перехода. [3] X Источник информации

background: linear-gradient(направление/угол, цвет1, цвет2, цвет3 и так далее); 

Создайте вертикальный градиент. Если не задать направление, градиент будет идти сверху вниз. Чтобы создать такой градиент, введите следующий код между тегами :

html  min-height: 100%; > body  background: -webkit-linear-gradient(#93B874, #C9DCB9); background: -o-linear-gradient(#93B874, #C9DCB9); background: -moz-linear-gradient(#93B874, #C9DCB9); background: linear-gradient(#93B874, #C9DCB9); background-color: #93B874; > 

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

Создайте направленный градиент. Если вы не хотите, чтобы градиент шел по вертикали, укажите направление перехода цветов. Для этого введите следующий код между тегами : [4] X Источник информации

html  min-height: 100%; > body  background: -webkit-linear-gradient(left, #93B874, #C9DCB9); background: -o-linear-gradient(right, #93B874, #C9DCB9); background: -moz-linear-gradient(right, #93B874, #C9DCB9); background: linear-gradient(to right, #93B874, #C9DCB9); background-color: #93B874; > 

• Если хотите, переставьте слова «left» (влево) и «right» (вправо), чтобы поэкспериментировать с разными направлениями градиента.

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

background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%); 

background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1)); 

Просмотрите код. Код для создания цветового градиента в качестве фона веб-страницы будет выглядеть примерно так:

DOCTYPE html> html> head> style> html  min-height: 100%; > body  background: -webkit-linear-gradient(left, #93B874, #C9DCB9); background: -o-linear-gradient(right, #93B874, #C9DCB9); background: -moz-linear-gradient(right, #93B874, #C9DCB9); background: linear-gradient(to right, #93B874, #C9DCB9); background-color: #93B874; > style> head> body> body> html> 

Метод 4 из 4:

Как создать меняющийся фон

Найдите заголовок «html». Он должен быть в верхней части документа.

Добавьте свойство «animation» в элемент «body». Введите следующий код после «body

-webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite; 

• Верхняя строка текста предназначена для браузеров на основе Chromium, а нижняя строка текста — для других браузеров.

Добавьте цвета в свойство «animation». Воспользуйтесь правилом «@keyframes», чтобы задать цвета фона, которые будут циклически меняться, а также время, в течение которого каждый цвет будет отображаться на странице. Не забудьте ввести разный код для различных браузеров. Введите следующий код под закрывающей фигурной скобкой элемента «body»: [6] X Источник информации

@-webkit-keyframes colorchange  0% background: #33FFF3;> 25% background: #78281F;> 50% background: #117A65;> 75% background: #DC7633;> 100% background: #9B59B6;> > @keyframes colorchange  0% background: #33FFF3;> 25% background: #78281F;> 50% background: #117A65;> 75% background: #DC7633;> 100% background: #9B59B6;> > 

• Обратите внимание, что два правила ( @-webkit-keyframes и @keyframes ) имеют одинаковые цвета фона и проценты. Это сделано для того, чтобы меняющийся фон правильно работал в любом браузере.
• Проценты ( 0% , 25% и так далее) обозначают долю от времени ( 60 с ). Когда страница загрузится, ее фоном будет цвет #33FFF3 . Когда пройдет 15 с (25% от 60 с), фон сменится на цвет # 7821F и так далее.
• Измените время и цвета, чтобы они соответствовали желаемому результату.

Просмотрите код. Код для создания меняющегося фона должен выглядеть следующим образом:

DOCTYPE html> html> head> style> body  -webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite; > @-webkit-keyframes colorchange  0% background: #33FFF3;> 25% background: #78281F;> 50% background: #117A65;> 75% background: #DC7633;> 100% background: #9B59B6;> > @keyframes colorchange  0% background: #33FFF3;> 25% background: #78281F;> 50% background: #117A65;> 75% background: #DC7633;> 100% background: #9B59B6;> > style> head> body> body> html> 

Как изменить фон в footer и header? — Вопросы по CSS

Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.

В Joomla Extensions Directory появился тег совместимости с Joomla 5.

Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��

JoomlaDay Spain, Madrid.

В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.

Какой код поменять, чтоб сменить фон сайта?

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

Villeres
21.01.16 в 00:01

Комментарии (16)

Павел Романов 21.01.2016 11:42 #

Зайдите на сайт. Нажмите F12. Откроется консоль.
Найдите элемент с фоном (элементы подсвечиваются, когда проводите курсором по коду) и посмотрите какие CSS-атрибуты ему присвоены. Там же будет имя CSS-файла с оформлением и номер строки, где указано конкретное правило.
Отредактируйте нужное.

Антон 21.01.2016 14:56 #
Ну вы хоть ссылку на сайт дайте и объясните что на что поменять желаете

Villeres 21.01.2016 15:13 #

www.evakmos.ru/ вот сайт, хочу сделать темный фон везде и шрифты в основе поменять.

еще убрать желтый и оранжевые цвета полностью

Комментарий был изменён 21.01.2016 в 15:13
Антон 21.01.2016 15:26 #

За фон у вас отвечает картинка по адресу www.evakmos.ru/images/body.png
Либо замените картинку, либо в style.css отредактируйте 53 строку вписав туда новое изображение

body < margin: 0;background-image: url(../images/body.png);

если лень заморачиваться с изображением, то измените эту строку на

body < margin: 0;background-color: #5F3C3C;

И закоментируйте в 156 строке белый фон
например так

body < font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #999999;/* background-color: #fff; */>

Шрифт меняется так же в 156 строке
Остальные цвета аналогично

Villeres 21.01.2016 16:44 #

спасибо, заменил body.png.а желтый цвет как убрать?
Антон 21.01.2016 16:55 #
В меню менять на 1731 строке файла style.css

@media (min-width: 992px) < .navigation >

Градиент для каждого браузера персонально

В футере менять на 1684 строке

.footer-bottom

Villeres 21.01.2016 17:11 #

сделал сначала на 1731 строке, желтый цвет стал более тусклым просто.

потом сделал футер и все стало как раньше… яркий желтый цвет везде

Антон 21.01.2016 17:15 #

Та я вам ничего и не менял, это из вашего css, я просто указал где именно менять. Замените коды цвета на те которые вам больше нравятся.

Villeres 21.01.2016 17:40 #

заменил цвета, но не вышло все равно
Антон 21.01.2016 17:56 #

В меню меняйте цвета градиента для каждого браузера, подробнее тут
В футере меняйте значение background: #xxxxxxx

Villeres 21.01.2016 18:12 #

"@media (min-width: 992px) < .navigation background-color: #e2e2e2;
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
background: linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
padding: 10px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@col', endColorstr='@col2', GradientType=0);
border-radius: 0 0 18px 18px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.9) inset, 0 1px 4px rgba(0, 0, 0, 0.2);
border: 1px solid #dccf00;
height: 40px;
margin-bottom: 10px;
position: relative;
z-index: 1;> >"

то есть вот таких вот кодов должно быть 5?(если под 5 браузеров)

только менять в них первую строчку( background: -moz-linear-gradient)?

Антон 21.01.2016 18:49 #

Нет, код должен быть один, только этот
Селектор background: -moz-linear-gradient отвечает за градиент в FF
Селектор background: -webkit-linear-gradient отвечает за градиент в Webkit браузерах (chrome, safari . )
Селектор background: -o-linear-gradient отвечает за градиент в опере
Селектор background: -ms-linear-gradient отвечает за градиент в ie
Я же вам ссылочку дал, почитатайте, полезно же

Антон 21.01.2016 18:59 #

Пожалейте людей с мобильным трафиком, поставьте картинку в бэкграунд поменьше. У вас же ЦА это люди с мобильных браузеров.

Villeres 21.01.2016 19:06 #