Diagonal Div - Skew in html css with background image

Question

I want to skew a div in CSS. I've been finally been able to do it (beginner), BUT, if I add a background-image to it, the image will also skew. the image needs to stay straight.
Can you please help me?

Thank you

*{
    padding: 0;
    margin: 0;
}
body{
    background-color: #EFEFEF;
}
.fullwidth {
    width: 100%;
    height: auto;
    position: fixed;
}

.mid-container {
    width: 1150px;
    padding: 75px 0px;
}

.top_image {
    width: 50%;
    height: 800px;
    background-image:url(https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg);
    border-bottom-right-radius: 38px;
    transform: skew(14deg, -13deg) ;
    -webkit-transform: skew(14deg, -13deg) ;
    -moz-transform: skew(14deg, -13deg) ;
    -o-transform: skew(14deg, -13deg) ;
    -ms-transform: skew(14deg, -13deg) ;
    margin: -120px 0 0 -101px;

}
.nav{
    width: 88%;
    height: auto;
    padding: 40px 0px;
    background-color: #ffffff;
    margin: 0 auto;
}
.stroke {
    width: 80%;
    height: 5px;
    background-color: #000000;
    margin: 0 auto;
    opacity: 0.35;
    
}

<!DOCTYPE html>
<html>
<head>
    <title>Hakan Topac</title>
    <meta charset="utf-8"/>
    <link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
      <div class="top_image"></div>
</body>
</html>

Adraxas Nazaron Adraxas Nazaron · Accepted Answer · 2016-04-14T21:48:20

You will need to have the img in a separate element to do that.

* {
  padding: 0;
  margin: 0;
}
body {
  background-color: #EFEFEF;
}
.fullwidth {
  width: 100%;
  height: auto;
  position: fixed;
}
.mid-container {
  width: 1150px;
  padding: 75px 0px;
}
.top_image {
  width: 50%;
  height: 800px;
  border-bottom-right-radius: 38px;
  transform: skew(14deg, -13deg);
  -webkit-transform: skew(14deg, -13deg);
  -moz-transform: skew(14deg, -13deg);
  -o-transform: skew(14deg, -13deg);
  -ms-transform: skew(14deg, -13deg);
  margin: -120px 0 0 -101px;
}
.h {
  background-image: url(https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg);
  display: inline-block;
  width: 100%;
  height: 100%;
  border-bottom-right-radius: 38px;
  transform: skew(-14deg, 13deg);
  -webkit-transform: skew(-14deg, 13deg);
  -moz-transform: skew(-14deg, 13deg);
  -o-transform: skew(-14deg, 13deg);
  -ms-transform: skew(-14deg, 13deg);
}
.nav {
  width: 88%;
  height: auto;
  padding: 40px 0px;
  background-color: #ffffff;
  margin: 0 auto;
}
.stroke {
  width: 80%;
  height: 5px;
  background-color: #000000;
  margin: 0 auto;
  opacity: 0.35;
}

<!DOCTYPE html>
<html>

<head>
  <title>Hakan Topac</title>
  <meta charset="utf-8" />
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="top_image"><span class="h"></span>
  </div>
</body>

</html>

Diagonal Div - Skew in html css with background image

2 Answers