У меня есть слайдер div и фоновое изображение на нем. Поскольку фоновое изображение не подходит (слишком большое), его центр:
<div id="slider"></div><hr><hr><img src="http://hdwallpaper2013.com/wp-content/uploads/2013/02/Download-Flower-Background-Images-HD-Wallpaper.jpg" width="100%" />
#slider
{
width: 100%;
height: 100px;
background-size: 100% auto;
background-position: center;
background-image: url('http://hdwallpaper2013.com/wp-content/uploads/2013/02/Download-Flower-Background-Images-HD-Wallpaper.jpg');
}
теперь я хочу перемещать изображение вверх или вниз относительно этого центрирования. Я видел здесь своеобразное решение (извините, что я мог найти):
padding-top: 10px; margin-bottom: -10px;
но это работает только в одном направлении, оно может только подтолкнуть изображение вверх. Сдвинуть вниз, как это невозможно (отрицательные поля).
Есть идеи?
Используйте свойство background-position
(см. Здесь)
background-position: 50% 10%;
Вы можете изменить второе значение, чтобы выровнять свой фон по вертикали.
CSS
html, body {
width: 100%; /* important because slider id has width set in %ge*/
height:100%;
margin:0;
padding:0;
}
#slider {
width: 100%;
height: 100%;
background-repeat:none;
background-image: url('http://hdwallpaper2013.com/wp-content/uploads/2013/02/Download-Flower-Background-Images-HD-Wallpaper.jpg');
-webkit-background-size: 100% 100%; /* browser support */
-moz-background-size: 100% 100%;/* browser support */
-o-background-size: 100% 100%;/* browser support */
background-size: 100% 100%;
background-position: top center; /*you need this one*/
}
background-position: center -50px;
Добавленный в #slider
должен дать вам то, что вам нужно. Измените -50px
на любое положительное или отрицательное значение, которое вы желаете.
img
находится внеdiv
... чего вы пытаетесь достичь ??