Как сделать, чтобы пнгэшка работала фоном для тега input?

Question

[ManiLim]

Сделал макет в фигме и теперь я не могу разобраться с кодом. нужно чтобы та картинка которая должна служить в виде фона для тега input

<img
            src="public/external/rectangle5input120-3co-200h.png"
            alt="Rectangle5input120"
            class="android-large2-rectangle5input"
          />
          <img
            src="public/external/rectangle6input121-6g61n-200h.png"
            alt="Rectangle6input121"
            class="android-large2-rectangle6input"
          />
          <img
            src="public/external/rectangle4input119-vasy-200h.png"
            alt="Rectangle4input119"
            class="android-large2-rectangle4input"
          />

нужно чтобы она не искажалась

Comments

[Mors Clamor]

Только вот непонятно зачем именно делать это картинкой....

[Алексей Уколов]

Что тут у вас "пнгэшка" вообще? Простая заливка серым?

[Vinovat]

Алексей Уколов, серый фон где введите логин пароль и имя но фигма сконвертировала как пнгэшку@66demon666, фигма сконвертировала как пнгэшку потом просто залью серым

Answer 1

[Tigran Hakobyan]

Ну если должен выглядеть так как на фото,то просто
background-color: gray; ну или по коду смотришь в фигме

Answer 2

[ARCHXTEKK]

Это лучше сделать через css
В селектор для нужного input следующий добавь код:
background: url("*url картинки*")
Можно сделать и через костыли, например обернуть пару input + img в какой-нибудь div, ему указать:
position: relative;
а затем указать для img:

position: absolute;
top: 0;
left: 0;

Comments

[ARCHXTEKK]

Правда в случае костыльного варианта возникнет проблема с перекрытием контента, в таком случае придётся заморочиться ещё и с z-index, а так же указать для input
background: transparent;

[Ankhena]

ARCHXTEKK,
1. Проще pointer-events: none
2. Вместо абсолюта - гриды.
3. Но вы правы в том, что фоновая картинка это украшение и делается через css, а не вставляется как img в разметку.