Вопрос CSS - повторение для х двух разных изображений в разных направлениях

Question

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

Я пытаюсь достать ветку, на которой змея идет в обоих направлениях. (используя background-repeat для x) Однако он будет совпадать только с одной или другой стороной. Есть ли способ заставить x повторяться только для одной стороны изображения, чтобы я мог использовать две полоски изображения дерева, и оно будет совпадать с обеих сторон?

Спасибо за любой вклад или понимание, которое вы могли бы иметь!

Answer 1

Как это будет работать? Представьте себе изображение как последовательность символов xyz.

Для повторения изображения мне нужно использовать:

xyz,xyz,xyz,xyz

Если стороны изображения (x и z) не совпадают, невозможно повторить их, не получив несоответствия на границах между повторениями.

Другими словами, исправьте изображение так, чтобы стороны совпадали.

Answer 2

Нет, вы не можете указать это.

Что вам нужно сделать, это разбить вашу страницу на 3 зоны: snake, left, right. Затем используйте разные повторяющиеся фоны для левого и правого.

Вы также можете исправить изображение змеи, чтобы оно совпадало.

Answer 3

Вы можете использовать background-position xpos ypos, чтобы установить начальную точку фона. Переместите его вверх, чтобы он совпал с изображением змеи.