Only background image to be flipped

Question

I have this code


<div id="page-wrapper" style="background-image: url(//localhost/xampp/moodle-rds-newest/kbeams/pluginfile.php/1/theme_space/loginbg/1624365793/Web%20edu%20V8-41.png); background-size: cover; background-attachment: fixed; background-repeat: no-repeat;" data-login="bg">

I would like to flip only the background image not the whole site. Because the CSS takes all the div and it implements the flip to every child element. Is there any way to include the css on the specific div for just the background image and to only flip the background image without flipping the whole page?

I need the background image to be mirrored horizontally in the opposite direction that it currently is. — Meridian Asllani, Jun 23 '21 at 09:03
I did try this, but unfortunately it affects the whole div not just the background image on the div. So basically the whole page is mirrored, and I just need the background image to be affected. — Meridian Asllani, Jun 23 '21 at 09:06
you can add another div inside it with `absolute` position and give the background to that, you can flip that without fliping the parent div. — fevid, Jun 23 '21 at 09:08
if your wrapper has no scrolling bar and is a single column a quick easy test would be : `#page-wrapper, #page-wrapper>* {transform:scalex(-1);}` . it will flip the wrapper and flip back the content. If there is columns inside that wrapper or a scrollbar, it will be mirrored once flipped back to be readable. what kind of layout do you use inside the wrapper ? However, the most secure way is to update that img on your server. — G-Cyrillus, Jun 23 '21 at 09:25
example to illustrate my previous comment : https://codepen.io/gc-nomade/pen/PoprWwV — G-Cyrillus, Jun 23 '21 at 09:38

score 0 · Answer 1 · answered Jun 23 '21 at 09:25

You can use the selector ::before, give it a background, make it full in height and width, and after that, flip it so it will not affect the content of the parent div.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        html, body {
            height: 100%;
        }
        body {
            color: white;
            margin: 0;
        }
        .content::before {
            content: '';
            background-image: url("some.url/background.jpg");
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: -1000;
            transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
        }
        </style>
    </head>
    <body>
        <div class="content">
            <span>Content goes here...</span>
        </div>
    </body>
</html>

NOTE: I made the element full in height and width using the properties left, right, top, and bottom. You can use width and height too.

Only background image to be flipped

1 Answers1