Изображение фонового изображения HTML смещено на x пикселей из центра

Я хотел бы поместить изображение в качестве фона веб-страницы, но смещать его на некоторое количество пикселей по отношению к центру.

Как я могу это сделать?

Я хочу:

background-image: url("bg.png");
background-position: 25% center;
background-attachment: fixed;
background-repeat: no-repeat;

но вместо 25% я хочу что-то вроде линии "center - 50px". Есть ли какое-либо решение для этого?

Ответы

Ответ 1

Я считаю, что у меня есть решение, которое достигает желаемого:

Фоновое изображение (в частности, фона страницы), смещенное на несколько пикселей относительно центра.

Это работает с использованием только HTML и CSS - не требуется javascript.

Update

Теперь это можно легко достичь, используя background-position и calc как блок CSS.

Следующий CSS достигнет того же результата, что и предыдущее решение (см. "Исходное решение" ниже):

#background-container {
    width: 100%;

    background-image: url("background-image.png");
    background-position: calc(50% - 50px) 50%;
    background-repeat: no-repeat;
}

Примечание. Не используйте этот метод, если вам нужна поддержка устаревших версий IE.

Исходное решение

#background-container {
    width: 100%;
    left: -100px; /* this must be TWICE the required offset distance*/
    padding-right: 100px; /* must be the same amount as above */

    background-image: url("background-image.png");
    background-position: center;
    background-repeat: no-repeat;
}

То, что это делает, перемещает весь контейнер по горизонтали на указанное количество (в данном случае налево 100px). Поскольку фоновое изображение центрировано относительно контейнера, оно перемещается влево с контейнером.

Заполнение исправляет 100px пустого пространства, которое будет отображаться справа от контейнера в результате перемещения. Фоновые изображения отображаются через прописку). Поскольку браузеры используют значение border-box вместо значения содержимого по умолчанию для вычисления размера фона и позиционирования, фоновое изображение эффективно перемещается вправо на 50 пикселей - на половину расстояния от прокладки. (Спасибо ErikE за разъяснение).

Таким образом, ваше смещение/заполнение должно быть в два раза больше требуемого расстояния смещения.

Я подготовил образец страницы для вас здесь: http://www.indieweb.co.nz/testing/background-offset-center.html

Имейте игру с изменением размера окна. Вы увидите, что фиолетовое и синее фоновое изображение (наложенное на более глубокое фоновое изображение, обозначающее центр страницы) остается ровно 50 пикселей (половина смещения/расстояния заполнения) слева от центра страницы.

Ответ 2

Использование background-position: center; совпадает с background-position: 50% 50%;.

Итак, вы можете использовать calc для выполнения простой математики в CSS в качестве замены любого значения длины, например:

background-position: calc(50% - 50px) 50%;

Центрирует фоновое изображение, но сдвиньте его на 50 пикселей влево.

Ответ 3

Итак, вы хотите, чтобы он был центрирован сдвинутыми 50 пикселями влево. Я бы добавил 50 пикселей к изображению в виде прозрачного пространства, если только вы не имеете дело с абсолютными размерами.

Ответ 4

Нет очевидного ответа CSS. Вам нужно будет либо использовать JavaScript для вычисления значений, либо сделать что-то сложное. Вы можете попробовать сохранить background-position:25% center и добавить position:relative;left:-50px или margin-left:-50px, но они могут не работать в зависимости от того, как вы используете элемент DOM.

Ответ 5

Единственный метод, который я нашел для этого, - это иметь фон внутри другого div, а затем использовать javascript для изменения...

<style>
    body {
        width: 100%;
        overflow: hidden;
        }
    #bg {
        position: absolute;
        background: url(images/background.jpg) center top;
        }
</style>

<script>
    function recenter(){
        var $pos = $('#content').offset().left;
        $('#bg').css('left',$pos-580);
    }
    recenter();
    $(window).resize(function(){ recenter(); });
</script>

<body>
    <div id="bg"></div>
    <div id="content">
        blah
    </div>
</body>

Ответ 6

если вы знаете ширину изображения, вы можете использовать это:

background-position: (BgWidth - 50)px 0px;

Обратите внимание, что вы не можете иметь это так, то есть вам нужно вычислить (BgWidth - 50), а затем записать там номер.

Если вы не знаете ширину, вы можете использовать Javascript (с или без jQuery), а затем использовать это:

$(#ID).css('background-position', (BgWidth - 50)+'px 0px');

Ответ 7

Хороший ответ Люк,

еще одна вещь, если ширина вашего блока больше разрешения экрана, вы должны поместить свой блок в другой контейнер и сделать это:

#container{
  position:relative;
  overflow:hidden;
}

#shadowBox{
  width: 100%;
  left: -100px; /* this must be TWICE the required offset distance*/
  padding-right: 100px; /* must be the same amount as above */
  background-image: url("background-image.png");
  background-position: center;
  background-repeat: no-repeat;
  position:absolute: /*this is needed*/
}

Ответ 8

Мой ответ должен быть слишком поздним, но каким-то образом я нашел другое решение.

padding-left: 100px; /* offset you need */
padding-right: 100%;

или

padding-right: 100px;
padding-left: 100%;

Примеры имеют тот же эффект.

Ответ 9

единицы должны быть одинаковыми, поэтому при указании пикселей для позиции x положение y должно быть также в пикселях.

пример:

background-position: 25% 50%;

EDIT: Я просто перечитываю ваш запрос, и единственный способ сделать это - либо знать абсолютную позицию (если внешние элементы не являются динамическими/гибкими), либо если вы не знаете позицию, возможно, используйте javascript для установки ее положение.