Обложка фонового размера CSS и фоновая позиция

HTML:

 <div id="backgroundproduct" style="background-image: url(http://example.com/example.jpg)">

CSS

#backgroundproduct {
    position: fixed;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    z-index: 12;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: top;
}

Я использую изображения в качестве фонового изображения, только нижняя часть изображения более важна, чем верхняя.

Как я могу сделать фон немного вверх?

Ответ 1

Если дно важнее: background-position: bottom;

background-position также позволяет процентным значениям: 0% 0%; по умолчанию.

Первое значение - это горизонтальное положение, а второе значение - вертикали. Верхний левый угол 0% 0%. Правый нижний угол 100% 100%. Если вы укажете только одно значение, другое значение будет 50%.

Вам следует попробовать background-position: 0% -10%;

Ответ 2

Вы можете использовать:

background-position: center bottom;

Ответ 3

Просто, чтобы быть четким, проценты фоновой позиции вычисляются против ОБОИХ изображения и фонового контейнера. Итак, фоновая позиция: 25% 25%; найдет 25% -ую точку для X и Y на контейнере фона и выровнят изображение на 25%, 25% на вершине этой точки.