CSS: Background-position + repeat = не работает

Question

Кто-нибудь сталкивался с такой проблемой с CSS раньше?

У меня есть заголовок, который установлен на 100% ширины, с изображением на левой стороне (шириной 500 пикселей). У меня есть фоновое изображение, которое я хотел бы заполнить для оставшегося пространства по горизонтали, но не там, где изображение. Поэтому я установил background-position: 500px 0; и предположим, что фон начинается на расстоянии 500 пикселей от левой части браузера. Но это не так. Это работает, только если я устанавливаю свойство repeat в background-repeat: no-repeat; Я просто потратил 1,5 часа, пытаясь найти решение без удачи, и в конце концов решил это, добавив margin-left: 500px; к заголовку и отрицательное поле в 500 пикселей слева от изображения. Я что-то здесь упускаю? Почему я не могу сказать своему фону начать мозаику по горизонтали от координаты х 500?

Answer 1

Я что-то здесь упускаю? Почему я не могу сказать своему фону начать мозаику по горизонтали от координаты х 500?

background-position не устанавливает источник фона, из которого следует повторить вправо или вниз. Он просто сдвигает весь фон на определенное расстояние по осям x и y соответственно.

Когда вы указываете фон, который будет повторяться вдоль оси, он всегда будет располагаться бесконечно в обоих направлениях вдоль этой оси (то есть влево и вправо вдоль горизонтальной оси, вверх и вниз по вертикальной оси). Вы не сможете изменить это, используя свойства фона CSS.

Answer 2

В дополнение к ответу BoltClock, вы можете смоделировать это, поместив div внутри, чтобы быть фоном

HTML:

<div id="repeater">
    <div id="repeater-offset"></div> 
</div>

CSS:

#repeater {
    background-image:url('http://lorempixel.com/400/200');
    background-position: 100px 0;
    height: 300px;
    width: 300px;
    border: 1px solid #000;
}

#repeater-offset {
    background-color:#fff;
    position:relative;
    width:100px;
    height:100%;
}

Смотрите скрипку: http://jsfiddle.net/NmxrK/1/

Answer 3

Создайте второй div внутри заголовка рядом с изображением слева. Вы можете достичь этого разными способами, например, с плавающей точкой: вправо или с абсолютным позиционированием и с полем слева: 500px; Установите свой повторяющийся фон в этом втором div и убедитесь, что высота и ширина составляют 100%. Вы также можете установить переполнение: скрытое в заголовке, чтобы избежать появления полос прокрутки.