CSS: Background-position + repeat = не работает - PullRequest
Новая
       44

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

3 голосов
/ 11 марта 2012

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

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

Ответы [ 3 ]

5 голосов
/ 11 марта 2012

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

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

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

1 голос
/ 11 марта 2012

В дополнение к ответу 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/

0 голосов
/ 11 марта 2012

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

...