How to Add & Change Background Color in HTML
Setting the background color of a web page or an element on the page can enable you to create unique layouts.
Take the homepage of Delish as an example. The background image of its header section is a colorful soup. To ensure readers can still see the name of the recipe, the background color of the text box is set to white. The effect is striking and easy to read.
HTML Background Color Tutorial – How to Change a Div Background Color, Explained with Code Examples
One of the most common things you may have to do as a web developer is to change the background-color of an HTML element. But it may be confusing to do if you do not understand how to use the CSS background-color property.
In the article, we discuss
- the default background color value of an HTML element
- how to change the background color of a div, which is a very common element
- which parts of the CSS box model are affected by the background-color property, and
- the different values this property can take.
Default Background Color of an Element
The default background color of a div is transparent . So if you do not specify the background-color of a div, it will display that of its parent element.
Changing the Background Color of a Div
In this example, we will change the background colors of the following divs.
Without any styling, this will translate to the following visually.
Let’s change the background color of the divs by adding styles to the classes. You can follow along by trying the examples in an HTML file.
This will result in the following:
Cool! We have successfully changed the background color of this div. Next, let’s get to know more about this property. Let’s see how the background-color property affects parts of the CSS-box model.
Background Color and the CSS Box Model
According to the CSS box model, all HTML elements can be modeled as rectangular boxes. Every box is composed of 4 parts as shown in the diagram below.
The CSS Box Model
You can read up on the box model if you are not familiar with it. The question is, which part of the box model is affected when you change the background color of a div? The simple answer is the padding area and the content area. Let’s confirm this by using an example.
This will result in:
From the example above, we can see that the margin area and the border area are not affected by the change in background color. We can change the color of the border using the border-color property. The margin area remains transparent and reflects the background color of the parent container.
Finally, let’s discuss the values the background-color property can take.
Background-color Values
Just like the color property, the background-color property can take six different values. Let’s consider the three most common values with an example. In the example, we set the background-color of the div to red with different values.
Notice that they all result with the same background color.
Other values the background-color property can take include HSL value, special keyword values and global values. Here are examples of each of them.
You can read more on each of these values here.
Extra Note
When setting the background color of an element, it is important to ensure that the contrast ratio of the background color and the color of the text it contains is high enough. This is to ensure that people with low vision can easily read the text.
Consider these two divs.
The contrast between the background color of the first div and the color of the text is not high enough for everyone to see. So unless you are the only one using the website you are building and you have very good eyesight, you should avoid such color combinations.
The second div has a much better contrast ratio between the background color and the color of the text . Thus, it is more accessible and clearer for people to read.
Conclusion
In this article, we saw how you can change the background-color of a div. We also discussed which parts of the CSS box model are affected by the change in background-color. Finally, we discussed the values the background-color property can take.
Как сделать заливку в html
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12
Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу и на примерах покажу, как сделать фон из цвета или картинки в HTML-странице.
Все довольно просто!
Начнем из цвета!
Я думаю, вы не пропустили урок №11, там, где я рассказывал, как менять цвет текста и в конце статьи давал коды различных цветов и оттенков. Почему я напомнил вам об этом уроке? Да потому, что там есть таблица с готовыми кодами цветов, берите их и практикуйте сразу в этом уроке.
Итак, как сделать цветовой фон в HTML…
Цветовой фон в HTML
Цвет фона в HTML-документе по умолчанию белый. Как же задать цвет по желанию?
В этом нам поможет атрибут « bgcolor ». Чтобы закрасить задний фон, пропишите этот атрибут к тегу « body » :
Вот полный HTML-код:
Результат будет вот таким:
Как сделать в HTML картинку фоном
Если вы хотите сделать фон из картинки, тогда к тегу « body » пропишите атрибут « baсkground »:
Залейте любую картинку туда, где лежит ваша веб-страница (на примере у меня страница имеет название « fon » с расширением « .gif »):
Вот полный HTML-код:
Результат будет вот таким:
Если фоновая картинка размещена в папке images или в какой-то другой папке, это будет выглядеть так:
Вот полный HTML-код:
На сегодня это все! Я думаю, урок был не сложный и вы все поняли. Если есть вопросы, пишите в комментариях.
Жду вас на следующих уроках.
Как сделать фон в html и CSS?
В этой статье я покажу несколько вариантов как сделать фон в html и CSS. Думаю, вы согласитесь, что фон играет одну из самых важных ролей в дизайне любого сайта? От него зависит читабельность текста и его общее оформление.
Навигация по статье:
Как в html сделать фон в виде цвета или картинки?
Вы можете задавать фон блока или всей страницы с использованием различных вариантов:
- при помощи цвета,
- использовать изображение,
- градиентный фон,
- использовать сразу несколько вариантов (например, картинка + цвет или несколько картинок сразу).
Введу того что HTML не особо предназначен для визуального оформления страницы, в с помощью HTML можно сделать только фон в виде цвета или изображения. Для использования остальных вариантов создания фона нам не обойтись без помощи CSS. Но обо всём по порядку.
Чтобы в html сделать фон нам понадобится атрибуты bgcolor и background.
Для того чтобы в HTML сделать фон в виде цвета нужно к тегу для которого нам нужно задать фон дописать атрибут bgcolor
Чтобы сделать фон в виде изображения используем background и в кавычках указываем путь к файлу с картинкой.
Как сделать фон в CSS?
Как я уже писала выше мы можем использовать разные варианты задания фона и для всех их нам понадобится свойство background с разными значениями. Для того чтобы его использовать нам нужно сделать следующее:
-
1. В HTML коде присвоить элементу, для которого мы хотим задать цвет определённый класс или использовать атрибут style. Мне больше нравится вариант с классом, поэтому в первую очередь покажу его.
Как сделать фон в виде цвета в CSS?
Для задания цвета фона мы можем использовать несколько форматов:
-
1. Кодовое название цвета
Уровень прозрачности задаётся в виде десятичного значения от 0 до 1, где 0 – полностью прозрачный, а 1 – не прозрачный.
Так же вы можете воспользоваться вот этим инструментом для подбора нужного цвета и определения его кода. Просто водите мышкой по палитре, подбираете цвет и справа отображается его значение в шестнадцатеричном формате (HEX) и в формате rgb.
Как сделать фон в виде картинки в CSS?
Для этого нам нужно будет:
- 1. К себе на сайт в определённую папку с картинками загрузить изображение, которое мы хотим использовать в качестве фона.
- 2. Задать его в CSS
В скобочках указываем путь к картинке.
Так же если изображение у вас небольшое то будьте готовы увидеть такую картину:
Вы можете отключить повторение фона для маленьких изображений, дописав no-repeat:
Так же можно сделать чтобы он повторялся только по горизонтали:
Или только по вертикали:
Кроме того мы можем управлять расположением фонового изображения для элемента. Для этого нам нужно дописать следующе:
- top – для выравнивание по верхнему краю
- bottom — для выравнивания по нижнему краю
- left – выравниваем по левому краю
- right – по правому
- center – выравниваем по центру (можно использовать как для выравнивания по горизонтали так по вертикали)
Так же можно сочетать эти выравнивания.
Как растянуть фоновое изображение под размер элемента?
По умолчанию фоновое изображение не подстраивается под размер элемента. В эпоху адаптивных дизайнов это доставляет много неудобств. Для решения этой проблемы можно использовать свойство background-size.
- background-size: 100% auto; — растянет изображение по горизонтали, а по вертикали размер будет увеличиваться пропорционально чтобы не искажалось изображение.
- background-size: auto 100%; — растягивает по высоте, а по ширине размер пропорционально масштабируется.
- background-size: 100% 100%; — растянет картинку по горизонтали и вертикали, при этом изображение может деформироваться.
- background-size: contain; — изображение будет масштабироваться под размер блока насколько это возможно без искажения.
- background-size: cover; — картинка масштабируется чтобы хотя бы одна из сторон была по размеру элемента и не искажалась.
Как изменить расположение фона внутри элемента?
Кроме описанных выше значений top, bottom, left, right и center мы так же можем использовать значения в пикселях, процентах и em чтобы выставить фоновую картинку так как нам нужно.