How can I "unskew" the background image?

Question

Good morning, I am no expert on this and I am tired of looking for a solution to counter the skew given to the main container. Basically all the solutions that I have been able to understand so far do not solve.

The elements on top of the image I managed through css to make the skew Transform contrary to the main container and everything was ok, but I can not do the same to the background image that is being called in control (since this does not have a direct path, it has a relationship with folders to which it will fetch this image).

ASP.NET

divBedroomContainer.Attributes.Add("style", "background-image: url(" + trimmedFolder + trimmedBedroom + ".jpg)");

CSS

.Bedrooms {
    -webkit-backface-visibility: hidden;
    -webkit-transform: skewY(-2.7deg);
    transform: skewY(-2.7deg);
    outline: 1px solid transparent;
}
.BedroomContainer {
    float: left;
    width: 33.3334%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 400px;
    text-align: center;
    overflow: hidden;
}

Answer 1

According to a solution I found in the American Stack, you could use the background image in a pseudo-element and appropriate the transform-origin to solve your problem.

I don’t have full access to your code, but I think you can work on that idea:

.Bedrooms {
    -webkit-backface-visibility: hidden;
    transform: skewY(-2.7deg);
    -ms-transform: skewY(-2.7deg);
    -webkit-transform: skewY(-2.7deg);
    outline: 1px solid transparent;

/* novos estilos */
    position: relative;
    overflow: hidden;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}

.Bedrooms::before {
    content: "";
    transform: skewX(2.7deg); 
    -ms-transform: skewX(2.7deg); /* IE 9 */
    -webkit-transform: skewX(2.7deg); /* Safari e Chrome */
    background-image: url('#suafoto'); 
    background-repeat: no-repeat; 
    background-position: top left; 

    position: absolute;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    width: 1000%; /* algo gigante */
    height: 1000%; /* algo gigante */
}

Good luck there!