Как сделать адаптивный background из нескольких картинок?

Question

[Zellar]

1.Как сделать адаптивный background из нескольких картинок?
2. Как лучше всего сделать вот этот черный крест? Картинкой, блоками с border или как то еще?

Answer 1

[gleendo]

1. Адаптивный background:

.block {
  background-image: url("адрес картинки");
  background-repeat: no-repeat;
  background-size: 50% auto;
}

Пример: https://jsfiddle.net/evg_/aabo3fmk/

2. Как сделать черный плюс?
Как сделать без разницы, это маленький декоративный элемент, особой роли реализация не играет. Как сможете так и сделайте.

Comments

[Zellar]

Это я и так знаю насчет background)) Мне нужно чтобы несколько background'ов составляли эту картинку, и при уменьшении экрана она сужалась и вот эти белые линий были между ними и чтобы все оставалось на своих местах

[gleendo]

Zellar: Зачем усложнять жизнь? Здесь же явно видно что на фоне просто две цельные картинки. Зачем их делать в виде разделенных плиток? Делайте body множественный фон из 2х картинок и все.
А как сделать адаптивными я привел пример.

[Zellar]

evg_: Затем, что маленькие картинки весят в полтора раза меньше чем одна такая цельная)) А во вторых, вдруг цвет фона поменяется, и нужны будут уже не белые полосы на картинке а какие нибудь светло серый, не знаю)

[gleendo]

Zellar: Если заговорили об оптимизации, то использовать вот такие вот кусочки картинок тем более не нужно.
У вас 2 картинки состоят из 10 кусочков. Каждая картинка получится одни запрос на сервер.
Суммарно все кусочки весить будут +- также как 2 цельные картинки, а вот запросов будет в 5 раз больше.

Ну а на счет того что типа может поменяться цвет фона, тот уже ваше дело. Чушь какая то. Ну и что, что поменяется вам от этого не горячо не холодно не будет.
Если цвет фона поменяется, это значит поменялся дизайн. И кто знает как задумает дизайнер. Может он захочет чтобы линии всегда были белыми, а если не захочет то он и нарисует линиям новый цвет.

Но если вам все таки принципиально чтобы фон линий был под цвет фонового цвета, то нарезайте фон на 100500 мелких плиток и указывайте позиции для каждой. Супер сложного здесь ничего нет.
Указываете background-image, repeat, position, size и все. Но мое лично мнение, что так делать не нужно.

И еще раз повторюсь, как и писал в другом вашем вопросе, ваш дизайнер не дизайнер.

И вообще, как вы писали в другой теме, вы хотите профессионально научиться верстать, ну как я понял.
Я вам уже отвечал.
Но добавлю конкретно под эту ситуацию.
Зачем вы сейчас уже какой день зацикливаетесь на этих картинках из плиток?
Вам научиться верстать нужно или конкретно этот макет добить и чтобы картинки были именно из кусочков??? Думаю научиться верстать.
Не делайте такой супер целью сделать как задумал дизайнер. Мыслите как разработчик, как это будет делаться с технической стороны. И возникайте на каждую извращенную "дизайнерскую" идею.

Забудьте вы сейчас про этот фон да и верстайте дальше. Сверстайте весь макет. А фон это уже последнее дело. там уже если хватит нервов, можете и по извращаться.
Но с опытом вы поймете что нужно когда и как делать.

В общем как хотите, это ваше дело, ваша верстка.
Удачи, все равно, надеюсь все получится.

Как сделаете, создайте тему, или киньте в ЛС верстку, хочется посмотреть что получится.

[Zellar]

evg_: хорошо, спасибо за детальный ответ)