Rotating body's background image

Asked Oct 05 '20 at 00:34

Active Oct 05 '20 at 01:40

Viewed 179 times

I was wondering how could I rotate my background image and flipping it horizontally without it rotating and flipping the whole web page. I found stuff to rotate background-image for container and such, but none for the whole body of a web page. Here's what I have, but I don't think it can be of any help:

    body {
      overflow-x: hidden;
      padding: 0;
      margin: 0;
      width: 100vw;
      height: 100vh;
      position: relative;

  }

  body::before {
      background-image: url("images/cab06e1517827eff989457c69aae7ea5.png");
      background-repeat: no-repeat;
      background-position: right;
      background-size: 600px;
      z-index: -1;
      position: absolute;
      width: 100%;
      height: 100%;
      top: -100%;
      left: -100%;
    }

Thanks.

edited Oct 05 '20 at 01:40

asked Oct 05 '20 at 00:34

manouna

nope, didn't work. – manouna Oct 05 '20 at 00:49
It's not any different for the ``. You can have a `body::before` selector just fine. – Robo Robok Oct 05 '20 at 00:51
I have tried both (I just edited the post) but none did anything. The body:before literally erased my background for some reason – manouna Oct 05 '20 at 00:52
1

You need to put `content: ''` there to make it do anything :) – Robo Robok Oct 05 '20 at 00:53
just did that right now and my background is still empty. :/ – manouna Oct 05 '20 at 00:55
Are you sure about `-100%`? It should be 0, right? – Robo Robok Oct 05 '20 at 00:56
Tried both and both showed the void. – manouna Oct 05 '20 at 01:00
Maybe the image URL is wrong? – Robo Robok Oct 05 '20 at 01:00
I don't think so since the image showed (non-rotated of course) before I did anything to it – manouna Oct 05 '20 at 01:01
I checked your code and the image appears just fine if I use `content: ''` and change `top` and `left` to `0`. – Robo Robok Oct 05 '20 at 01:06
this means my issue is somewhere else... I guess I have to check the whole code on my own now then. Thanks for checking – manouna Oct 05 '20 at 01:07
Play with dev tools, find your `::before` element there and see how it behaves when you change its properties. – Robo Robok Oct 05 '20 at 01:08
Just did. I've just used a whole new code and it still doesn't work. And for some reason I've noticed the background was the colour I wanted it to be before I even set any background-color. this is messed up... – manouna Oct 05 '20 at 01:19
Can you put it online? – Robo Robok Oct 05 '20 at 01:20
I don't mind to show the whole code. Though I have no FTP on this PC, so would it be easier to take this to stack overflow chat so I can send you the whole page's code? – manouna Oct 05 '20 at 01:22
Sure, put it in the question, preferably as a snippet. – Robo Robok Oct 05 '20 at 01:24
Alright, here it is. As you can see, it's still pretty empty as I'm trying to figure this out. – manouna Oct 05 '20 at 01:27
1

You forgot `width` and `height`. – Robo Robok Oct 05 '20 at 01:31
omg I'm so sorry for taking so much of your time for such a dumb mistake on my end. Thank you, you literally saved my website with width and height. – manouna Oct 05 '20 at 01:41
1

You're welcome. I noticed the missing dimensions with Web Tools, as it showed me `0 x 0` when I hovered my mouse over the `::after` element. Dev Tools for the win! – Robo Robok Oct 05 '20 at 01:42
when i'd hover my mouse over the CSS dev tools showed nothing, that's why I didn't notice I suppose. Thanks again... – manouna Oct 05 '20 at 01:46

Rotating body's background image

0 Answers0