Diagonal background in CSS (Responsive) - html

Question

Here's an image of what I'm trying to achieve first: https://i.imgur.com/bTsL2wS.png
Note that this is only supposed to be one section of the full page. The background should not span the entire website. However each section has full-screen dimensions.
I had two ideas regarding doing this:
Have a container object with viewport dimensions and add an relative-positioned image with z-index: -1 and inside of that an absolute-positioned img with right: 0 and ~60% width, then rotate it.
Same as above but put the img inside of a 60% width right-aligned sub-container and skew the container.
Both approaches work on a desktop-screen but this happens when scaling the window down too much.
Basically I need it to work until the viewport reaches tablet/mobile size.

Answer 1

Wrap the part you want to have with that background in a div, then add the background-image property to the div.

Answer 2

*{ box-sizing: border-box}
#blue{ background: #269;}
#red{ background: #a22;}
#green{ background: #6a6; }
section{ display: block; height: 100vh; margin: 2% auto; color: #fff; font: normal 16px verdana, sans-serif; text-align: center; }
div{ height: 100%; width: 70%; overflow: hidden; float: right;}
img{ transform: rotate(70deg); height: 920px; margin: -120px 0 auto; }
h1, p{ margin: 5% auto 0 0; width: 40%;}
#media only screen and (min-height: 500px){ h1, p{ margin: 30% auto 0 0 }}
span{ position: absolute; left: 2%; z-index: 2; background: rgba(0,0,0,0); height: 100vh; width: 96%; padding: 20px }
css for tests only
span::before{ content: 'this is span'}
p::after{ content: 'this is pafagraph'; display: block; padding: 20px 0 0}
h1::after{ content: 'this is h1'}
section:hover h1, section:hover p{ background: grey}
span:hover{ background: rgba(0,0,0,0.5); }
<section id="blue"><div><img src="img.jpg" alt="blue"></div><span><h1></h1><p></p></span></section>
<section id="red"><div><img src="red.jpg" alt="red"></div><span><p></p></span></section>
<section id="green"><div><img src="green.jpg" alt="green"></div></section>
Responsiveness is an old story, mobile-first is up to date. Of course with responsive solutions, but #media only for larger devices.
You better not use flex, it leaks badly.