Значения и примеры использования
Свойство задаёт цвет фона элемента. Значение задаётся в виде hex-кодов, RGB-функций или названий цветов:
Background-image
Свойство позволяет задать изображение в качестве фона элемента. Это может быть любой тип изображения, включая jpeg, png, gif, svg и другие. Значение этого свойства указывается в формате URL, который ссылается на изображение.
Также есть возможность использовать несколько изображений для фона. Для этого нужно указать несколько значений через запятую. При этом каждое изображение будет располагаться друг над другом, начиная с первого указанного значения.
Background-repeat
Свойство определяет, как фоновое изображение будет повторяться внутри элемента, когда оно меньше размера элемента.
может принимать следующие значения:
- — изображение будет повторяться как по горизонтали, так и по вертикали (это значение является значением по умолчанию).
- — изображение повторяется только по горизонтали.
- — изображение повторяется только по вертикали.
- — изображение будет отображаться только один раз.
Background-position
Свойство устанавливает позицию фона. Задаётся в процентах или пикселях относительно верхнего левого угла элемента. Чтобы выровнять центральную часть фонового изображения по центру элемента, можно использовать значение , где первое значение указывает позицию по горизонтали, а второе по вертикали.
Background-size
Свойство позволяет установить размеры фонового изображения. Значение может быть указано в пикселях, процентах, которые рассчитываются от размера элемента, или любых других доступных для CSS единицах измерения. Также можно указать ключевое слово:
- — значение по умолчанию и оно указывает на то, что размер фонового изображения должен быть равен его исходному размеру.
- — фоновое изображение будет растянуто по всей ширине и высоте элемента, что приведет к обрезанию изображения, если его размеры не соответствуют размерам элемента. При этом гарантируется, что весь элемент будет полностью заполнен изображением.
contain — фоновое изображение будет изменено пропорционально, чтобы подходить размеру элемента, что гарантирует, что вся картинка будет видна в элементе. Однако возможно оставление пустых областей с двух сторон элемента.
Background-attachment
Свойство указывает, будет ли фон элемента прокручиваться вместе с содержимым страницы или останется на месте.
Значения свойства:
- — фоновое изображение прокручивается вместе с элементом, как обычный фон.
- — фоновое изображение остается на месте, когда элемент прокручивается.
- — фоновое изображение фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон, выходящий за рамки элемента, остаётся на месте.
Нюансы
Если одновременно установлены и , то будет отображаться поверх цвета фона.
Если установлен , то позиционирование фона осуществляется относительно окна браузера, а не относительно элемента, на который установлен фон.
Если значение указано в процентах, то размер изображения будет задаваться относительно размера элемента.
Как добавить цвет фона в HTML
Чтобы добавить цвет фона в HTML, используйте свойство CSS background-color. Задайте для него желаемое имя цвета или код и поместите его в атрибут стиля. Затем добавьте этот атрибут стиля к элементу HTML, например к тегу таблицы, заголовка, div или span.
Допустим, вы создавали таблицу в HTML. Добавление цвета фона может помочь таблице выделиться среди других элементов на странице и сделать ее более читаемой. Допустим, вы хотели сделать его аквамагазином. Затем вы должны добавить атрибут стиля к открывающему тегу таблицы. Это означает, что изменится только цвет фона этой конкретной таблицы. Никакие другие элементы на странице не будут затронуты.
Вот HTML со встроенным CSS:
Вот результат:
Все просто. Теперь давайте посмотрим, что делать, если вы хотите установить цвет фона для нескольких элементов на странице.
Example
We will discuss the background-color property below, exploring examples of how to use this property in CSS.
Using Hexadecimal
Let’s look at a CSS background-color example where we have provided a hexadecimal value for the color.
In this CSS background-color example, we have provided a hexadecimal value of #FFFFFF which would display the background color as white for the <div> tag.
Using RGB
We can also provide the background-color value using rgb.
In this CSS background-color example, rgb(0,0,0) would also display background color as white for the <div> tag.
Using Color Name
Let’s look at a CSS background-color example where we have provided the value as a named color.
In this CSS background-color example, we have provided the name «white» which would also set the background color of the <div> to white.
Part Two – Observations on interplay and color in context
Elements of color are essential not only in the way they pair with other complementary shades but also in the quantity and placement in relationship to those other colors and in how it relates to other patterns and photographic elements next to it and elsewhere on the website. In this section, I will share/curate websites with beautiful color schemes, hexadecimal codes, and just a brief note about why color being used works in context as well.
8. Blue Red
Deep Red: #b11a21 – In an overlay, juxtaposed against flat blue, the photographic background gives depth.
Lighter Red: #e0474c – The smiling face coming through the red, makes it feel striking.
Blue Beans: #7acfd6 – The flat blue provides a contrast to the photo behind the red.
Light Classy Grey: #f1f0ee – Simple light grey is used to provide depth behind a later photographic section, with white below.
Found on Website Inspiration by Mind Sparkle Mag
9. Sunny and Calm
Morning Sky: #CAE4DB – Never underestimate a color palette created by a photograph to set the tone of your design.
Honey: #DCAE1D – In this case, the palette is set with the photo and then echoed in the subtitle.
Cerulean: #00303F – Cerulean is incredibly classy as a black or dark grey alternative if used consistently throughout.
Mist: #7A9D96 – This clean, natural color is established in the photo but could be used on a lower full-width block or buttons as well.
Found on Inspiring Website Color Schemes by Canva
9. Dark and Orange
Dark Grey: #393939 – Dark designs take a little bit more fore-thought but can provide tons of contrast if used well.
Deep Orange: #FF5A09 – With different shades of oranges, there is depth and gradient, without venturing into totally new colors.
Light Orange: #ec7f37 – Utilizing illustrative elements, requires a bit of flexibility for the natural lightness and darkness to contour objects.
Orange Yellow: #be4f0c – Using on color over on the color wheel can keep the palette looking classy, bold, and restrained.
Found on Great Color Schemes by One Extra Pixel
10. Squeaky
Fresh: #4ABDAC – Once again the color overlaid over the photographic elements provides a classy modern touch
Vermillion: #FC4A1A – A figure in the foreground is worked into the context, still paying attention to how it complements the overall structure of the design. In fact, one might even be able to surmise that the design was down around this figure.
Sunshine: #F7B733 – The Yellow provides only a juxtaposed call to action and highlights important parts
Clean: #DFDCE3 – Clean grey, utilized in the photograph, keeps the structure un-encumbered by more colors or patterns in these sharp headshots.
Found on Inspiring Website Color Schemes by Canva
11. Basic blue-green
Ol’ trusty blue: #368cbf – Blue wins for trust in color psychology, but make sure it’s a tasteful hue, as some blues are too out of the box. Just like my art teacher said with paints, you should always mix them before applying to canvas, lest you get something that looks like you just slapped the colors out of the box.
Accent color green: #7ebc59 – Corporate Blue + Eco-conscious green = Every website ever. But don’t overlook the use of common color schemes just because their common. Wield familiar colors together when it serves your purpose of feeling trustworthy.
Dark Slate: #33363b – Breaking up white space with a darker header, footer, or full-width sections provides relief from things that are too repetitive.
Light grey: #eaeaea – This truly is one of the most common color schemes around the website, particularly for technology companies. Are you sick of it yet? I like it.
Found on Free awesome WordPress Themes by ColorLib
The vital part of this section is a reminder that colors don’t live in a vacuum. How they relate to each other is complex, and pairing them not only with other colors that complement them but in degrees and quantities that work well together is important. When I show that orange and yellow are working well together, always keep in mind the context and how much of each are present. There might be a tiny sliver of yellow, so it’s not just that they work well, but how much of each and where.
Цвет фона элемента.
А вот свойство background-color — определяет цвет фона элемента.
Цвет фона может иметь следующие значения:
- #ff0000 — шестнадцатеричное значение цвета RGB.
- red — именное значение цвета.
- RGB(255,0,0) — значение цвета RGB.
- transparent — прозрачный фон. (по умолчанию)
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html><head><title>Цвет фона элемента</title></head><body style=»background-color: #fffacd«><div style=»background-color: white«>Белый блок</div><div style=»background-color: #0000ff«>Синий блок</div><div style=»background-color: RGB(255,0,0)«>Красный блок</div><div style=»background-color: transparent«>Прозрачный блок</div></body></html>
смотреть пример
