How can I make "unskew" the background image?

Question

How can I make "unskew" the background image?

Navigation

#1 by (0 votes)

2

Good morning, I'm no expert on this and I'm 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 above the image I got through css make the skew transform opposite to the main container and everything was ok, but I can not do the same to the background image that is being called in the control (since it does not have a direct path, has a relationship with folders to which it fetches 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;
}

css background transform background-image

asked by anonymous 15.05.2017 / 12:07

1 answer

Master-detail in MVC Spring Error using dictionary in an IQueryable.Select () method to design chosen columns at runtime

score 0 · Answer 1

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

I do not 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!