Background with different colors, images and shape

Question

I want background like this. How can I get this with pure CSS.

I have searched for this but I didn't find any answer.

I want to ignore usages of large background images.

UPDATE

I have tried like this (only with color)

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

But, I want to add image with color.

Here is Fiddle which I have tried Fiddle-Demo

And it have problem with responsive, you can check by resizing window.

Answer 1

Multiple background images:

 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-qc-400-200-1.jpg); } 

 <div></div> 

Or a pseudo-element:

 div { height: 200px; width: 400px; margin: auto; border: 1px solid grey; background-image: url(http://lorempixel.com/image_output/city-qc-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>