Верстка такого фона?

Question

[a9105051396]

Как правильно сверстать такой фон?



Фон отдельно и через background-image поверх текстуру?

Answer 1

[Jack Williams]

Background: linear-gradient + background-repeat. То есть снизу изображение, которое повторяется, а поверх градиент - все просто!

Comments

[a9105051396]

Цвет фона понятно что через linear-gradient
А текстуру? Картинкой?

[Jack Williams]

a9105051396, нет никакого цвета фона, есть просто картинка (бесшовная), которая повторяется, а поверх градиент.

[a9105051396]

Jack Williams,
Ну то есть типа такого?
background-image: url('../img/bg.png');
background-color: rgb(9,10,59);
background-color: linear-gradient(90deg, rgba(9,10,59,1) 0%, rgba(30,66,118,1) 35%, rgba(9,10,59,1) 100%);

[Jack Williams]

a9105051396, нет. Градиент - на DIV,который лежит поверх DIVA с фоном с повторяющейся картинкой.

[a9105051396]

Jack Williams, А чем мой вариант не правильный?

[Jack Williams]

background-image: url('../img/bg.png');
background-color: rgb(9,10,59);
background-color: linear-gradient(90deg, rgba(9,10,59,1) 0%, rgba(30,66,118,1) 35%, rgba(9,10,59,1) 100%);

Все 3 строки друг друга исключают.

[a9105051396]

Jack Williams, Но работают

[a9105051396]

А нет. градиент фона не задается, просто цвет.
Спасибо.

[ArtemGum]

background-image: url(), gradient;

[Ankhena]

Jack Williams, Зачем вы советуете разные дивы-то?

a9105051396, вниз повторяющаяся картинка (лучше svg), вторым фоном градиент.
Фоны пишутся через запятую. Первый - верхний, последний - нижний.

Answer 2

[Nikola Okonesh]

делаешь вот так:
.myfondiv{
background: radial-gradient(at top, #00036566, #0b0b0be0), url('/my-image.png') no-repeat center / cover;
}
Это я как пример показал.

Comments

[Nikola Okonesh]

В вашем случае будет repeat center center.
Вместо radial ставите liniear

[a9105051396]

Так не работает. Работает если сделать наоборот. Сначала картинка, потом градиент.

[Nikola Okonesh]

Странно, но у меня работает.