Picture in Parallelogram

Hey there,

I want to give my pictures an angle on one side.
Like half of a parallelogram. (see picture in private section)

I gave it a class with this css:

`.parallelogram {
width: 1200px;
height: 900px;
-webkit-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
transform: skewX(-10deg);
overflow: hidden;
text-align: center;
position: relative;
}
.parallelogram img {
-webkit-transform: skewX(10deg);
-ms-transform: skewX(10deg);
transform: skewX(10deg);
 position: absolute;
left: -100px;
}

But: I want the Picture break out and be bigger than the Container. It should go to the top behind the burger and on the right side of my browser- like it would be in the grid element or color section background.

What could I add to the code?
I also tried the Grid, but then, the Text breaks out of the Container and I want the text to be in the grid.