Можно ли центрировать фоновое изображение в div? Я попробовал почти все - но безуспешно:
<div id="doit">
Lorem Ipsum ...
</div>
//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }
Это возможно?
Можно ли центрировать фоновое изображение в div? Я попробовал почти все - но безуспешно:
<div id="doit">
Lorem Ipsum ...
</div>
//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }
Это возможно?
Ответы:
#doit {
background: url(url) no-repeat center;
}
background-size: cover;
Если вы хотите, чтобы все изображение отображалось без какой-либо части изображения, которое вы хотите обрезать или растянутьbackground-size: contain;
пытаться background-position:center;
РЕДАКТИРОВАТЬ: так как этот вопрос получает много просмотров, стоит добавить дополнительную информацию:
text-align: center
не будет работать, потому что фоновое изображение не является частью документа и, следовательно, не является частью потока.
background-position:center
является сокращением для background-position: center center
; ( background-position: horizontal vertical
);
background-position:center;
Использовать background-position:
background-position: 50% 50%;
Для центра или позиционирования фонового изображения вы должны использовать background-position
свойство. Свойство фон положения задает начальное положение фонового изображения с top
и left
стороны элемента. Синтаксис CSS есть background-position : xvalue yvalue;
.
Поддерживаемые значения «xvalue» и «yvalue» - это единицы измерения длины, например, px
процентное соотношение и названия направлений, такие как left, right и т. д.
«Xvalue» - горизонтальное положение фона, начинающееся сверху элемента. Это означает, что если вы используете 50px
его, будет "50px" от верхней части элементов. И "yvalue" - это вертикальная позиция, которая имеет такое же состояние.
Так что если вы используете background-position: center;
ваш фоновый рисунок будет по центру.
Но я всегда использую этот код:
.yourclass {
background: url(image.png) no-repeat center /cover;
}
Я знаю, что это так запутанно, но это значит:
.yourclass {
background-image: url(image.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
И я знаю, что это тоже background-size
новое свойство, и в сжатом коде /cover
эти коды означают изменение fill
размера фона и позиционирование в фоновом режиме рабочего стола Windows.
Вы можете посмотреть более подробную информацию о background-position
в здесь и background-size
в здесь .
Если ваше фоновое изображение представляет собой вертикально спрайтовый лист, вы можете горизонтально центрировать каждый спрайт следующим образом:
#doit {
background-image: url('images/pic.png');
background-repeat: none;
background-position: 50% [y position of sprite];
}
Если ваше фоновое изображение представляет собой горизонтально спрайтовый лист, вы можете вертикально центрировать каждый спрайт следующим образом:
#doit {
background-image: url('images/pic.png');
background-repeat: none;
background-position: [x position of sprite] 50%;
}
Если ваш спрайт-лист компактен или вы не пытаетесь центрировать фоновое изображение в одном из вышеупомянутых сценариев, эти решения не применяются.
Это работает для меня:
#doit{
background-image: url('images/pic.png');
background-repeat: no-repeat;
background-position: center;
}
Это работает для меня:
.network-connections-icon {
background-image: url(url);
background-size: 100%;
width: 56px;
height: 56px;
margin: 0 auto;
}
margin: 0 auto;
где auto
делает его центром по центру внутри div. Спасибо!
Это работает для меня:
<style>
.WidgetBody
{
background: #F0F0F0;
background-image:url('images/mini-loader.gif');
background-position: 50% 50%;
background-repeat:no-repeat;
}
</style>
Это работает для меня для выравнивания изображения по центру div.
.yourclass {
background-image: url(image.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}