Фон с различными цветами, изображениями и формой

Question

Мне нужен фон. Как я могу получить это с помощью чистого CSS.

Я искал для этого, но я не нашел ни одного ответа.

Я хочу игнорировать использование больших фоновых изображений.

UPDATE

Я попытался, как это (только цветом)

background : linear-gradient(125deg, #3081ff 31%, #3081FF 78%, #307aff 33%, #307aff 25%) 

Но я хочу, чтобы добавить изображение с цветом.

Вот Скрипки, который я пытался Fiddle-Demo

И есть проблемы с отзывчивым, вы можете проверить с помощью изменения размеров окна.

Answer 1

Несколько фоновых изображений:

div { 
 
    height: 200px; 
 
    width: 400px; 
 
    margin: auto; 
 
    border: 1px solid grey; 
 
    background-image: linear-gradient(135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, .5) 50%), url(http://lorempixel.com/image_output/city-q-c-400-200-1.jpg); 
 
}

<div></div>

Или псевдо-элемент:

div { 
 
    height: 200px; 
 
    width: 400px; 
 
    margin: auto; 
 
    border: 1px solid grey; 
 
    background-image: url(http://lorempixel.com/image_output/city-q-c-800-400-1.jpg); 
 
    background-size: 100%; 
 
    background-position: center right; 
 
    background-repeat: no-repeat; 
 
    position: relative; 
 
} 
 
div::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-image: linear-gradient(135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, .5) 50%); 
 
}

<div></div>