Как выровнять фон в html

Как сделать фоновую картинку на всю ширину?

Для изменения размеров фоновой картинки используется свойство background-size. Значение 100% масштабирует изображение на всю доступную ширину, при этом высота будет задана автоматически, исходя из пропорций картинки (пример 1).

Пример 1. Использование background-size

Результат данного примера показан на рис. 1. Обратите внимание, что по умолчанию картинка повторяется по вертикали. Если повторение запретить через background-repeat, то фоновая картинка будет занимать лишь часть веб-страницы.

Рис. 1. Фоновая картинка на всю ширину веб-страницы

Часто также требуется ограничить высоту фона фиксированным значением, а ширину оставить 100%. Для этого используем свойство height для указания высоты, а для background-size пишем значение cover (пример 2).

Пример 2. Использование background-size

Ширина фона

Домашняя акула

Результат данного примера показан на рис. 2.

Фоновая картинка на всю ширину

Рис. 2. Фоновая картинка на всю ширину элемента

См. также

background-size
Анимация ссылок при наведении
Масштабирование фона
Несколько фоновых картинок
Установка фона и градиента

background-position

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

Синтаксис

background-position: [left | center | right | | ] || [top | center | bottom | | ] | inherit

background-position: [, ]*

= [left | center | right | | ] || [top | center | bottom | | ] | inherit.

Значения

У свойства 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% (в правом нижнем углу)

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

При inherit значение наследуется у родителя элемента.

XHTML 1.0 CSS2.1 IE Cr Op Sa Fx

    background-position   .

HTML5 CSS3 IE Cr Op Sa Fx

    background-position

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundPosition

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

CSS по теме

Background-position: позиционирование фона

Свойство background-position позволяет указывать начальную позицию фонового рисунка сразу для двух осей — x и y. Впрочем, можно воспользоваться и отдельными свойствами для каждой оси — background-position-x и background-position-y .

Значения background-position

В качестве значений могут выступать как специальные ключевые слова, так и числовые значения в единицах измерения CSS — процентах, пикселях и т. д.

Ключевые слова для горизонтального позиционирования

left — фоновый рисунок прилеплен к левой стороне элемента;
center — фоновый рисунок расположен в центре оси x;
right — фоновый рисунок прилеплен к правой стороне элемента.

Ключевые слова для вертикального позиционирования

top — фоновый рисунок прилеплен к верхней стороне элемента;
center — фоновый рисунок расположен в центре оси y;
bottom — фоновый рисунок прилеплен к нижней стороне элемента.

Сокращенная запись для двух осей

Часто позиционирование фона задается сразу для двух осей. Для этого удобно пользоваться сокращенной записью, т. е. свойством background-position. Оно принимает одно либо два значения (для позиционирования сразу по двум осям либо по каждой отдельно соответственно).

Ниже — различные примеры позиционирования фона с помощью ключевых слов:

background-position: top center; /* фон вверху по центру */ background-position: top right; /* фон в верхнем правом углу */ background-position: bottom left; /* фон в левом нижнем углу */ background-position: center right; /* фон справа по центру */

Значения можно менять местами — они будут работать так же.

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

Для позиционирования фона можно использовать и одно значение для двух осей сразу:

background-position: center; /* фон по центру */ background-position: left; /* фон слева по центру */ background-position: right; /* фон справа по центру */ background-position: top; /* фон вверху по центру */ background-position: bottom; /* фон внизу по центру */

Точные значения в единицах измерения CSS

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

Читать:

Как создать том на жестком диске windows 10

Такая запись означает, что фон удален от левого края на 10 пикселей и от верхнего края на 25 пикселей. Здесь важен порядок записи значений: первое значение отвечает за положение фонового рисунка по горизонтали, второе — по вертикали. Допустимы и отрицательные значения (например, они могут быть полезны в случае, если с левой или верхней стороны фоновой картинки есть область, которую необходимо спрятать).

Регулировать расстояние фона, отталкиваясь от правой или нижней стороны элемента, можно с помощью специального значения, которое записывается так:

Здесь ключевые слова right и bottom говорят браузеру, что вы хотите делать отсчет от правой и нижней стороны. Следом за каждым из ключевых слов записывается желаемое значение. Так, 15px — это расстояние между фоном и правой стороной элемента, а 40px — расстояние между фоном и нижней стороной элемента.

Процентные значения

Большое удобство предоставляет возможность записи значений в процентах. Расстояние вычисляется, исходя из размеров элемента с заданным фоном. Допустимы отрицательные процентные значения, но результат здесь может быть неожиданным.

Лучший способ понять, как перемещается фон под управлением процентных значений — это попрактиковаться. А пока что покажем несколько примеров позиционирования фона через проценты:

Обратите внимание: значение 50% идеально центрирует фоновое изображение (как по вертикали, так и по горизонтали), поскольку точка центра устанавливается в середине фона, а не в его начале или конце.

Комбинирование значений

Да, вы можете записывать для каждой из осей свое значение в необходимых единицах измерения (либо используя ключевое слово). Комбинируйте точные значения с относительными, ключевые слова со значениями в единицах измерения — полная свобода действий. Примеры:

Важно: фоновые изображения и печать

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

Поддержка браузерами

Запись background-position с двумя параметрами поддерживается всеми используемыми браузерами.

Запись с четырьмя параметрами для отсчета от правой и нижней сторон работает только в IE9+, Firefox 13+, Chrome 25+, Safari 7+.

Свойства background-position-x и background-position-y не поддерживаются браузером Firefox вплоть до 48-й версии, а также не воспринимаются мобильными браузерами Opera Mini и Opera Mobile до версии 12.1.

Подробную информацию вы всегда можете посмотреть на сайте Caniuse.com.

Далее в учебнике: background-attachment — фиксация фона.

Растянуть фон по вертикали и горизонтали на всю ширину блока CSS

В документации сказано, что background-size:cover растягивает изображение так, чтобы оно по высоте и(или) по ширине было растянуто по всему блоку, но картинка растягивается только по ширине (в качестве фона использую картинку 1200×700). Если сделать экран очень маленьким в ширину, то виден пробел между фоном и концом блока. Можно ли как-нибудь сделать так, чтобы фон пропорционально растягивался и по ширине и по высоте. Я предполагаю, что изображение должно увеличиваться, если ему не хватает расстояния до одной из сторон.

Отслеживать
simply good
задан 30 окт 2016 в 21:47
simply good simply good
566 1 1 золотой знак 6 6 серебряных знаков 20 20 бронзовых знаков
Там, наверное, вначале сообщения должно быть background-size: cover;
2 дек 2017 в 0:54
Проверьте reset css. Возможно проблема в обнулении отступов и рамки
14 апр 2021 в 11:12

5 ответов 5

Сортировка: Сброс на вариант по умолчанию

background-size: 100% 100%;

Если же мы напишем вот так background-size: 100%; то это интерпритируется как background-size: 100% auto; то есть высота будет выравниваться пропорционально, а нам это не нужно, по этому нужно явно указать что высота должна быть не авто а 100% от высоты блока. Изи катка

Отслеживать
ответ дан 11 авг 2019 в 10:58
Алексей Соснин Алексей Соснин
465 1 1 золотой знак 5 5 серебряных знаков 9 9 бронзовых знаков

Без воспроизводимого примера в вопросе сложно предположить в чем именно проблема. Вам подойдет именно background-size: cover; , он возможно не срабатывает по нескольким причинам. Например, само изображение фона содержит белые полосы, откройте изображение и посмотрите есть ли они там. Например, возможно, изображение не отцентрировано. Например, возможно другие стили перекрывают ваши, посмотрите в инспекторе. Или возможно сам блок, на который вы добавляете фон не на всю высоту или ширину нужного блока. Вот небольшой наглядный пример с фонами, возможно вам поможет:

span < display: inline-block; padding: 6px; color: #2d5857; font-family: sans-serif; font-weight: 600; font-size: 20px; background: white; margin: 6px; >div < color: white; height: 100vh; background-image: url(https://i.stack.imgur.com/WXyZl.jpg); border: 6px solid yellow; margin-bottom: 6px; >.bg_1 < background-position: center; >.bg_2 < background-size: cover; >.bg_3 < background-size: contain; >.bg_4 < background-size: cover; background-position: center; >.bg_5 < background-size: contain; background-repeat: no-repeat; background-position: center; >.bg_6

 no styles 
  background-position: center; 
  background-size: cover; 
  background-size: contain; 
  background-size: cover; 
background-position: center; 
  background-size: contain; 
background-repeat: no-repeat; 
background-position: center; 
  background-position: bottom 10px right 40px; 
background-size: 60px 120px; 
background-repeat: no-repeat;