CSS Background-Position не работает?

Вопрос:

У меня есть код ниже, и я пытаюсь добавить атрибут в центр фона, но он не работает.

Существующий код:

<div class=»av-section-color-overlay» style=»opacity: 1; background-color: #000000; background-image: url(http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg); background-repeat: repeat;»></div>

Существующий CSS:

opacity: 1; background-color: #000; background-image: url(«http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg»); background-repeat: repeat; }

CSS, который я пытался добавить:

.av-section-color-overlay { background-position: center center !important; }

Веб-сайт , и я пытаюсь центрировать полноэкранное изображение аватара

Лучший ответ:

Здесь есть несколько конкурирующих проблем:

1. Внутри элемента, с которым вы работаете, нет содержимого, поэтому фоновое изображение становится подрезанным в результате.
2. Фоновое изображение очень велико, поэтому трудно видеть желаемое центрирование, не устанавливая 1) установку элемента DIV на относительно большую высоту/ширину или установку свойства CSS background-size.
3. Концепции background-repeat: repeat и background-position: center составляют конкурирующие желания. Вы не можете как центрировать изображение, так и нарисовать его бесконечно в обоих направлениях.

Поэтому в свете вышесказанного, если вы примените несколько дополнительных модификаций стиля, вы получите желаемое поведение с тем, что вы указали: background-position: center. (Если вы хотите сосредоточиться в обоих направлениях, вам не нужно явно указывать его дважды – подразумевается, что вы хотите использовать его в обоих направлениях, если есть только одно значение.)

Что-то вроде:

.av-section-color-overlay { background-color: #000; background-image: url(«http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg»); background-repeat: no-repeat; background-size: 100px; background-position: center; height: 200px; width: 200px; }

а также:

<div class=»av-section-color-overlay»></div>

Пример: https://jsfiddle.net/7mpqfd22/2/

Ответ №1

Я бы предложил не повторять предысторию, а буксовать ее в контейнере, что выглядит лучше. Центр работает:

{ opacity: 1; background-color: #000000; background-image: url(http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; }