Как правильно вставить фоновую картинку?

Question

[Novamoscow]

На этом макете есть картики с инструментами (на фоне)

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

Чтобы не добавлять огромную картинку, я их хочу вставить отдельно, через позишен абсолют (так же правильно?)

И второй момент, картинки нужны с прозражностью, и поэтому они получаются слишком большие, как можно размер уменьшить и оставить хорошее качество

Comments

[Novamoscow]

https://yadi.sk/i/QWzZ3gOy3GZRtp

[Евгений]

Novamoscow: картинка в тексте вопроса не грузится

[Novamoscow]

Евгений: ссылка выше на картинку которая лежить на ЯД

Answer 1

[Ankhena]

Чтобы не добавлять огромную картинку, я их хочу вставить отдельно, через позишен абсолют (так же правильно?)

Нет, зачем?
Есть background-position и background-size ими и пользуйтесь.

Comments

[Novamoscow]

100 кб для картинки это норм ? я сделал 8битный пнг получилось около 100кб

[Novamoscow]

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

[Ankhena]

Novamoscow: понятие "на одном месте" при адаптиве довольно расплывчатое.
Если не хватает совйств указанных в ответе, то есть еще https://webref.ru/css/background-attachment

[Novamoscow]

Вот конкретно в моем примере ключи которые с права, как их правильно спозиционировать ?

[Ankhena]

Novamoscow: top right? Ну или в точках, потому что не понятно где именно кончается сама картинка.

При уменьшении экрана вообще убирать, чтобы под текст не попадали.

[Novamoscow]

Ankhena W: а как быть когда должно быть видно только половину картинки ? То есть размер браузе такой, что влезают только пол картинки, увеличиваешь окно браузера и остальная картинка появляется

[Ankhena]

Novamoscow: https://jsfiddle.net/tw4y6r5m/

[Ankhena]

Novamoscow:

а как быть когда должно быть видно только половину картинки ?

Поговорить с дизайнером на тему, зачем ему понадобилось показывать людям половину инструмента?

А мне покажите макет, как дизайнер себе это представляет.

[Ankhena]

Novamoscow: Чтобы показывалась половинка:
Вариант 1: Фон под основной статьей должен быть непрозрачным, тогда он перекроет часть рисунка.
Вариант 2: Делать 3 блока. 2 крайних для фона. Блоки будут уменьшаться, картинки обрезаться. Но это совсем уж гадко.

[Novamoscow]

решил вопрос с помощью псевдоэлемента

Answer 2

[nkorobkov]

Правильнее будет вставить большую картинку и сжать её на https://www.jpeg.io/.

Comments

[Ankhena]

Полупрозрачный jpg?

[nkorobkov]

Ankhena W: нет, вы о чем? Я говорю что лучше не png позиционировать отдельно, а целиком вырезать фон и сжать его для уменьшения размера. При чем тут прозрачность?

[Ankhena]

nkorobkov: ссылка у вас на конвертер всего в jpg

[nkorobkov]

Ankhena W: ну так фон то будет в jpg

[Ankhena]

nkorobkov: Вы макет-то смотрели? Там общий фон страницы виден под фоном блока.
Можно и jpg'ом сотворить, только целесообразность = 0.

Answer 3

[xtala zen]

Картинки в div пропиши бэкграундом. Класс назначь дивам, и в класс -- position: fixed не забыв указать бэкграунд позишен.
При адаптиве назначь мультикласс и делай ужо что хочешь.
Можешь свойства убрать и добавить, картинки скрыть и раскрыть, и даже крутить их вертеть, растянуть в зависимости от разрешенья экрана.
Гугли медиаквери, почувстуй силу сего заклинанья.