Как разместить разделительную линию, вызванную повторением фона

Question

Я хотел бы иметь повтор-x на моем фоне тела для веб-сайта, но фон имеет ширину 1024, поэтому на более широких дисплеях линия, где начинается изображение снова будет располагаться справа от тела и, возможно, видимым. Мое содержание находится в div 800 по центру тела. Я хотел бы, чтобы «раскол», как из повторяющегося фона, происходил в центре тела, где он скрыт содержимым.

Я уверен, что это возможно, с некоторыми обманами, детали которых не соответствуют моим новичкам и макетам.

РАЗРАБОТКА: Я использовал плагин Liquid Rescale GIMP, который использует seam carving, чтобы растянуть изображения в два раза до их первоначального размера. Он отлично работает, и я доволен, но это не ответ на этот вопрос.

Answer 1

просто положить в стиле:

background-position: 400px 0px; 

это начнет повторяющееся 400px с левой стороны (таким образом, перемещая раскол по содержанию)

Answer 2

Я думаю, что это не возможно сделать это динамически (без учета размера экрана) без использования выражений CSS. Однако я не знаю подробностей о поддержке браузеров. Быстрый поиск в Google показал эту страницу как пример того, как это сделать.

http://valums.com/vertical/

Answer 3

Несложный способ сделать это без какого-либо CSS обмана или дополнительной разметки, чтобы изменить изображение. Центрируйте фоновое изображение с помощью:

background-position: top center; 

... а затем смещать фактический файл изображения в редакторе. В Photoshop используйте Filter >> Other >> Offset и используйте горизонтальное значение, которое составляет половину ширины изображения. Аналогично, в Gimp используется Layer >> Transform >> Offset.

Это не чистое решение для CSS, которое вы искали, но это хорошее прагматическое исправление.

Answer 4

Добавление к тому, что сказал Дэвид, создавая цельное, плиточные фоновое изображение не так жестко:

Seamless background with Photoshop

Это займет немного времени, но это будет хорошо выглядеть на все разрешения экрана, как только вы «Сделано.