CODEWITHSUNDEEP
css
Bagrat Zakaryan
Bagrat Zakaryan

Reputation: 325

CSS: background-image rotate without transform: rotate()

I rotated the block that is given a background-image, I need the image not to be rotated but the block that is given the image to be rotated.

page link What must I do?

Thank you.

CSS:

   .bg {
        background-image: url("http://bagrattam.com/sss/website/images/other/paint.png");
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        top: -50%;
        left: -10%;
        right: -10%;
        height: 170%;
        z-index: -1;
        transform: rotate(-10deg);
    }

Upvotes: 1

Views: 21923

Answers (2)

Sudipto
Sudipto

Reputation: 440

To do that, remove the rotation from the CSS of the .bg class and increase its height from 170% to 225%:

.bg {
    background-image: url(http://bagrattam.com/website/images/other/paint.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -50%;
    left: -10%;
    right: -10%;
    height: 225%;
    z-index: -1;
    transform: rotate(0deg);
}

Then use the :after pseudo class to add a rotated overlay over the image which adds the skew effect:

.bg:after {
    content: "";
    font-size: 200px;
    background: #ffffff;
    display: block;
    position: absolute;
    height: 500px;
    left: 0;
    right: 0;
    bottom: -350px;
    transform: rotate(-8deg);
}

Here's what it looks like now:

enter image description here

Hope this helps :)

Upvotes: 2

sn3ll
sn3ll

Reputation: 1685

Use a psuedo element, put the image in that and rotate it the other way

.bg:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -10%;
  right: -10%;
  height: 170%;
  z-index: -1;
  background: url(http://bagrattam.com/website/images/other/paint.png') 0 0 repeat;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

Don't forget to set the main elements 'overflow:hidden' so it doesn't flow outside.

Upvotes: 1

Related Questions