How to Rotate Container Background Image using CSS ?

Last Updated : 07 Oct, 2024

Rotating a container’s background image using CSS involves applying the transform: rotate() property to the container element. This rotates the entire element at a specified angle, including its background image, creating a dynamic, rotating visual effect on the web page’s design.

Approach: Using transform Property

The transform property in CSS allows you to rotate a container’s background image by applying transform: rotate(deg). This rotates the entire container, including its content and background, at the specified degree, adding a visually dynamic effect to the design.

Syntax

.class_name { transform: value }

Example: In this example we are using Flexbox to align two containers horizontally: one with a normal background image and the other rotated by 90 degrees. A 50px gap separates the two image containers.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Rotated Background Image</title>

    <!-- CSS -->
    <style>
        /* Container for normal background image */
        .background-image {
            background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20241007094106304681/gfg-demo.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            width: 300px;
            height: 300px;
            margin-bottom: 50px; /* Space between normal and rotated image */
        }

        /* Container for rotated background image */
        .rotated-background-image {
            background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20241007094106304681/gfg-demo.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            width: 300px;
            height: 300px;
            transform: rotate(90deg);
            /* Ensure browser compatibility */
            -moz-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
        }

        /* Optional styling for page centering */
        body {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
            gap: 50px;
        }
    </style>
</head>

<body>
    <!-- Normal background image which is not rotated -->
    <div class="background-image"></div>

    <!-- Rotated background image -->
    <div class="rotated-background-image"></div>
</body>

</html>