Как сгладить переход между backgroundами?

Question

[danilr]

Есть картинка, она должна быть на весь экран, но так как она меньше ширины экрана, то приходится делать два фона - один картинкой, второй градиентом похожим. Как сделать переход между этими фонами плавным и не заметным?

.backg{
  width: 100vw;
  height: 100vh;
  background: url('/images/404/dog.jpg') bottom no-repeat, linear-gradient(90deg, #F2F2F2 0%, #F2F2F2 16.29%, #E0DCD9 90.93%, #E0DCD9 100%);
  background-size: contain; 
}

Comments

[Rustam Bainazarov]

1. Отредактировать нормально фотографию.
2. Наложить справа псевдоэлемент поверх блока с градиентом от прозрачного до нужного цвета + нужной ширины.

[keeplod]

Рустам Байназаров, Написал бы как ответ, ибо даже пометить как ответ нельзя =(

[danilr]

Рустам Байназаров, 1) это понятно 2) у меня ширина может меняться, неизвестно точно где будет этот стык.

[Rustam Bainazarov]

danilr, а, чуть лучше вник в код. Ну тогда редактируйте фото. Вариантов у вас нет.

Answer 1

[houd1ini]

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

Answer 2

[Маркус Кейн]

Отредактируйте картинку, фон сделать прозрачным, тогда все ровно ляжет