Как сделать чтобы фон был поверх картинки?

Question

[Russk]

Как сделать чтобы фон был поверх картинки и был прозрачен, как на картинке ?

Comments

[Ankhena]

Вариантов много
1. Картинка - фон body
Полупрозрачный цвет - фон обертки формы или самой формы
2. Картинка и цвет - заливки одного блока, но тогда вместо просто цвета нужно использовать градиент из цвета в самого себя.
3. Картинка - фон body или обертки формы
Цвет - огромной тенью от формы
4. Картинка - фон body или обертки формы
Цвет - полупрозрачный псевдо

И различные комбо этих вариантов.

Answer 1

[Олег]

<div style="background-image: url(<адрес картинки>); background-size:cover;">
   <div style="background-color: rgba(100,100,255,0.7);">блок с вашей формой</div>
</div>

Comments

[Russk]

что значит блок с вашей формой ?

[Олег]

Russk, блок, в котором размещена ваша форма с полями)))

Answer 2

[Danil Klimov]

Я бы сделал так.

.block {
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%), url(https://place-hold.it/1920x1080);
}

Таким образом можно сделать затемнение картинки градиентом, что бывает полезно.
Стоит также учитывать что linear-gradient в safari поддерживается частично. Но простой градиент точно будет работать.

Comments

[Ankhena]

Какие еще 79%
https://caniuse.com/?search=linear-gradient

[Danil Klimov]

Ankhena, И то верно)) не туда глянул. 79% поддерживают полностью и safari частично - почти 19%