Выровняйте фоновое изображение по центру и отрегулируйте вверх или вниз (по вертикали) относительно

0

У меня есть слайдер div и фоновое изображение на нем. Поскольку фоновое изображение не подходит (слишком большое), его центр:

http://jsfiddle.net/s5qvY/

<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;

но это работает только в одном направлении, оно может только подтолкнуть изображение вверх. Сдвинуть вниз, как это невозможно (отрицательные поля).

Есть идеи?

  • 0
    ваш img находится вне div ... чего вы пытаетесь достичь ??
Теги:

3 ответа

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

Используйте свойство background-position (см. Здесь)

background-position: 50% 10%;

Вы можете изменить второе значение, чтобы выровнять свой фон по вертикали.

1

демонстрация

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*/
}
1
background-position: center -50px;

Добавленный в #slider должен дать вам то, что вам нужно. Измените -50px на любое положительное или отрицательное значение, которое вы желаете.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню