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

Question

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);
    }

You put image in a pseudo element like `::after` and reverse its rotate — Asons, Mar 31 '17 at 14:51
Possible duplicate of [How to rotate the background image in the container?](http://stackoverflow.com/questions/5087420/how-to-rotate-the-background-image-in-the-container) — roberrrt-s, Mar 31 '17 at 14:53
I've seen this article, but there is no any solution because they rotated with transform. — Bagrat Zakaryan, Mar 31 '17 at 14:57

score 2 · Accepted Answer · edited Sep 01 '21 at 14:16

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:

Hope this helps :)

Do you have a working example in the browser? – Eric Jan 02 '23 at 19:17 — Eric, Jan 02 '23 at 19:17

score 1 · Answer 2 · answered Mar 31 '17 at 14:57

1

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.

answered Mar 31 '17 at 14:57

sn3ll

1,629
1
10
16

`.background:before { background-image: url('http://bagrattam.com/website/images/other/paint.png'); background-repeat: no-repeat; background-size: cover; content: ""; position: absolute; width: 100%; height: 130%; top: 0%; left: 0%; z-index: -1; transform: rotate(10deg); }` – Bagrat Zakaryan Mar 31 '17 at 15:04
So I could not write the code correctly but it was help, thanks. – Bagrat Zakaryan Mar 31 '17 at 15:05

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

2 Answers2