Как поместить задний фон снизу в html

background-position¶

Свойство background-position задаёт начальное положение фонового изображения, установленного с помощью свойства background-image .

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

Синтаксис¶

Значения¶

У свойства background-position два значения, положение по горизонтали (может быть — left , center , right ) и вертикали (может быть — top , center , bottom ). Кроме использования ключевых слов положение также можно задавать в процентах, пикселях или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задаётся положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

• top left = left top = 0% 0% (в левом верхнем углу)
• top = top center = center top = 50% 0% (по центру вверху)
• right top = top right = 100% 0% (в правом верхнем углу)
• left = left center = center left = 0% 50% (по левому краю и по центру)
• center = center center = 50% 50% (по центру)
• right = right center = center right = 100% 50% (по правому краю и по центру)
• bottom left = left bottom = 0% 100% (в левом нижнем углу)
• bottom = bottom center = center bottom = 50% 100% (по центру внизу)
• bottom right = right bottom = 100% 100% (в правом нижнем углу)

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

background-position

The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin .

Try it

Syntax

The background-position property is specified as one or more <position> values, separated by commas.

Values

A <position> . A position defines an x/y coordinate, to place an item relative to the edges of an element’s box. It can be defined using one to four values. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be center . If three or four values are used, the length-percentage values are offsets for the preceding keyword value(s).

1-value syntax: the value may be:

• The keyword value center , which centers the image.
• One of the keyword values top , left , bottom , right . This specifies an edge against which to place the item. The other dimension is then set to 50%, so the item is placed in the middle of the edge specified.
• A <length> or <percentage> . This specifies the X coordinate relative to the left edge, with the Y coordinate set to 50%.

2-value syntax: one value defines X and the other defines Y. Each value may be:

• One of the keyword values top , left , bottom , right . If left or right are given here, then this defines X and the other given value defines Y. If top or bottom are given, then this defines Y and the other value defines X.
• A <length> or <percentage> . If the other value is left or right , then this value defines Y, relative to the top edge. If the other value is top or bottom , then this value defines X, relative to the left edge. If both values are <length> or <percentage> values, then the first defines X and the second Y.
• Note that: If one value is top or bottom , then the other value may not be top or bottom . If one value is left or right , then the other value may not be left or right . This means, e.g., that top top and left right are not valid.
• Order: when pairing keywords, placement is not important as the browser can reorder it, the value top left or left top will yield the same result. With pairing <length> or <percentage> with a keyword the placement is important, the value defining X should come first followed by Y, the value right 20px is not the same as 20px right the former is valid but the latter is invalid. The value left 20% or 20% bottom is valid as X and Y values are clearly defined and the placement is right.
• The default value is left top or 0% 0% .

3-value syntax: Two values are keyword values, and the third is the offset for the preceding value:

• The first value is one of the keyword values top , left , bottom , right , or center . If left or right are given here, then this defines X. If top or bottom are given, then this defines Y and the other keyword value defines X.
• The <length> or <percentage> value, if it is the second value, is the offset for the first value. If it is the third value, it is the offset for the second value.
• The single length or percentage value is an offset for the keyword value that precedes it. The combination of one keyword with two <length> or <percentage> values is not valid.

4-value syntax: The first and third values are keyword value defining X and Y. The second and fourth values are offsets for the preceding X and Y keyword values:

• The first value and third values one of the keyword values top , left , bottom , right . If left or right are given here, then this defines X. If top or bottom are given, then this defines Y and the other keyword value defines X.
• The second and fourth values are <length> or <percentage> values. The second value is the offset for the first keyword. The fourth value is the offset for the second keyword.

Regarding Percentages

The percentage offset of the given background image’s position is relative to the container. A value of 0% means that the left (or top) edge of the background image is aligned with the corresponding left (or top) edge of the container, or the 0% mark of the image will be on the 0% mark of the container. A value of 100% means that the right (or bottom) edge of the background image is aligned with the right (or bottom) edge of the container, or the 100% mark of the image will be on the 100% mark of the container. Thus a value of 50% horizontally or vertically centers the background image as the 50% of the image will be at the 50% mark of the container. Similarly, background-position: 25% 75% means the spot on the image that is 25% from the left and 75% from the top will be placed at the spot of the container that is 25% from the container’s left and 75% from the container’s top.

Essentially what happens is the background image dimension is subtracted from the corresponding container dimension, and then a percentage of the resulting value is used as the direct offset from the left (or top) edge.

Using the X axis for an example, let’s say we have an image that is 300px wide and we are using it in a container that is 100px wide, with background-size set to auto:

So that with position percentages of -25%, 0%, 50%, 100%, 125%, we get these image-to-container edge offset values:

So with these resultant values for our example, the left edge of the image is offset from the left edge of the container by:

• + 50px (putting the left image edge in the center of the 100-pixel-wide container)
• 0px (left image edge coincident with the left container edge)
• -100px (left image edge 100px to the left of the container, in this example that means the middle 100px image area is centered in the container)
• -200px (left image edge 200px to the left of the container, in this example that means the right image edge is coincident with the right container edge)
• -250px (left image edge 250px to the left of the container, in this example that puts the right edge of the 300px-wide image in the center of the container)

It’s worth mentioning that if your background-size is equal to the container size for a given axis, then a percentage position for that axis will have no effect because the «container-image difference» will be zero. You will need to offset using absolute values.

Formal definition

: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword : A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword

Formal syntax

Examples

Positioning background images

Each of these three examples uses the background property to create a yellow, rectangular element containing a star image. In each example, the star is in a different position. The third example illustrates how to specify positions for two different background images within one element.

Как прижать background к низу ?

Можно ли как нибудь, с помощью css прижать background к низу ?

Тут что то не ясно, либо:

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.5.24.43458

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать фон? CSS-свойство background

В CSS свойство background предназначено для управления фоном любого элемента.

Это универсальное свойство, которое позволяет вам сразу установить несколько параметров. А именно:

• фоновое изображение или градиент;
• начальную позицию фонового изображения и его размер;
• повтор фонового изображения;
• перемещение фона относительно области просмотра браузера и элемента;
• цвет и т.д.

Универсальное свойство background состоит из восьми других свойств (в скобках указано значение по умолчанию, которое имеет каждое из них):

• background-image (none);
• background-position (0% 0%);
• background-size (auto);
• background-repeat (repeat);
• background-attachment (scroll);
• background-origin (padding-box);
• background-clip (border-box);
• background-color (transparent).

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

background-image – фоновое изображение или градиент

CSS-свойство background-image позволяет в качестве фона устанавливать обычные изображения (например, PNG, SVG, JPG, GIF, WebP) и градиенты. По умолчанию данное свойство имеет значение none .

Использовать в качестве фона изображение очень просто. Осуществляется это так:

Значение url() позволяет указать путь к файлу изображения, и оно будет отображаться в качестве фона для этого элемента.

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

В url() задать изображение можно также через URI данные:

background-image кроме установки изображений, позволяет также задать линейный, радиальный или конический градиент .

Пример двухцветного линейного градиента, идущего сверху вниз:

С указанием угла и нескольких цветов:

Радиальный градиент указывается с помощью radial-gradient :

Пример конического градиента:

Кроме этого в CSS имеются повторяющиеся градиенты ( repeating-linear-gradient , repeating-radial-gradient и repeating-conic-gradient ), с помощью них можно например, создавать различные узоры.

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

background-position – положение фонового изображения

Свойство background-position задаёт позицию фонового изображения (или градиента). Значение по умолчанию: 0% 0% (помещает изображение в верхний левый угол).

Первое значение определяет смещение по горизонтали, а второе — по вертикали.

Указывать значения можно посредством:

• пикселей (например, background-position: 100px 5px );
• процентов ( background-position: 100% 5% );
• с помощью ключевых слов: left , center , right , top и bottom ( background-position: top right ).

В современных браузерах в background-position можно указывать до 4 значений.

Когда вы объявляете одно значение, оно будет определять горизонтальное смещение. Вертикальное в этом случае будет иметь значение center .

Задавать background-position можно с помощью трёх или четырёх значений. В трех- или четырехзначном синтаксисе чередуются ключевые слова (кроме center ) и величина смещения ( px или % ). При этом ключевое слово должно предшествовать величине смещения, указанной с помощью px или % .

При указании трёх значений, браузер выставляет «отсутствующее» четвертое значение как 0.

Это свойство расположит фоновое изображение слева на 45px и снизу на 0px.

Пример использования в background-position 4 значений:

Это свойство поместит изображение слева на 45px и снизу на 10px.

background-size – масштабирование фона

Свойство background-size масштабирует фоновое изображение согласно заданным размерам. По умолчанию оно имеет значение auto .

Пример синтаксиса для явного указания размеров фона:

Кроме этого варианта, имеется также множество других различных синтаксисов, которые вы можете использовать для этого свойства.

1. Ключевые слова: auto (по умолчанию), contain и cover .

• auto – автоматически рассчитывает размер на основе реального размера изображения и соотношения сторон;
• contain – масштабирует изображение с сохранением пропорций так, чтобы оно целиком поместилось внутрь фона (т.е. 100% auto или auto 100% по меньшей стороне);
• cover – масштабирует изображение с сохранением пропорций так, что оно всегда покрывала всю область фона (т.е. 100% auto или auto 100% по большей стороне);

2. Одно значение. При указании только одного значения (например, background-size: 400px ), оно указывает ширину, а высота в этом имеет значение auto .

В background-size задавать размеры можно используя любые единицы измерения: px , % , em , vw , vh и т.д.

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

background-repeat – повтор фонового изображения

Свойство background-repeat определяет должно ли повторяться фоновое изображение, а если да, то как.

Значения этого свойства (помимо обычных значений вроде inherit ):

• repeat (по умолчанию) – повторение фонового изображения выполняется в обоих направлениях (по вертикали и горизонтали);
• repeat-x – повторение осуществляется только по горизонтали;
• repeat-y – повторение только по вертикали;
• no-repeat – не повторять, просто показать изображение один раз;
• space – повторение изображения делается в обоих направлениях так, чтобы они полностью заполнили область; размещение изображений выполняется равномерно, для к ним добавляются отступы, при этом крайние изображения всегда должны касаться краёв области;
• round – повторение изображения осуществляется в обоих направлениях так, чтобы в область поместилось целое количество изображений; при этом изображения могут как уменьшаться в размерах, так и растягиваться (если осталось меньше половины ширины изображения, то выполняется их растягивание, если больше, то сужение).

Также имеется синтаксис с двумя значениями (первое – по горизонтали, второе – по вертикали):

Синтаксис с одним значением – это просто сокращение синтаксиса с двумя значениями. Например, значение space вычисляется как space space .

background-attachment – прокрутка фона относительно области просмотра

Свойство background-attachment определяет как будет перемещаться фон относительно области просмотра браузера и элемента для которого он установлен.

• scroll (по умолчанию) – фон прокручивается в области просмотра браузера, но остается фиксированным внутри самого элемента;
• fixed – фиксированный фон несмотря ни на что;
• local – фон прокручивается как в окне браузере, так и в внутри элемента (если имеется прокрутка).

background-origin — размер области для рисования фона

Свойство background-origin определяет область для рисования фона.

• border-box – вся область элемента включая границы (border);
• padding-box (по умолчанию) – область элемента за исключением границ (т.е. включая только padding);
• content-box – область содержимого элемента (т.е. за исключением границ и padding);

background-clip – обрезка фона

background-clip очень похож на background-origin , но в отличие от него он обрезает фон, а не изменяет его размер.

background-clip имеет точно такие же значения ( border-box , padding-box и content-box ), но в качестве значения по умолчанию выступает border-box .

background-color – цвет фона

Свойство background-color применяется для установления сплошного цвета в качестве фона элемента.

По умолчанию данное свойство имеет значение transparent (прозрачный цвет).

Пример задания цвета посредством шестнадцатеричного кода:

Шестнадцатеричные коды – это один из способов объявления цвета в CSS. Другой способ – это использовать имена:

Ещё способы объявить цвет – это использовать rgb() , rgba() , hsl или hsla :

Несколько фоновых изображений

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

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