Как центрировать (фоновое) изображение в div?
можно ли центрировать фоновое изображение в div? Я пробовал почти все - но безуспешно:
<div id="doit">
Lorem Ipsum ...
</div>
//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }
это возможно?
8 ответов
попробовать background-position:center;
EDIT:поскольку этот вопрос получает много просмотров, его стоит добавить дополнительную информацию:
text-align: center
не будет работать, потому что фоновое изображение не является частью документа и поэтому не является частью потока.
background-position:center
сокращенно от background-position: center center
; (background-position: horizontal vertical
);
Если ваше фоновое изображение представляет собой вертикально выровненный лист спрайта, вы можете горизонтально центрировать каждый спрайт следующим образом:
#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;
}
для центра или позиционирование фонового изображения, вы должны использовать background-position
собственность .
Свойство background-position задает начальную позицию фонового изображения из top
и left
сторон элемента .
Синтаксис CSS background-position : xvalue yvalue;
.
"xvalue" и "yvalue" поддерживаемые значения-единицы длины, такие как px
и процент и имена направлении как слева, справа и т. д.
"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
на здесь .
это работает для меня:
.network-connections-icon {
background-image: url(url);
background-size: 100%;
width: 56px;
height: 56px;
margin: 0 auto;
}
это работает для меня :
<style>
.WidgetBody
{
background: #F0F0F0;
background-image:url('images/mini-loader.gif');
background-position: 50% 50%;
background-repeat:no-repeat;
}
</style>