Open In App
Related Articles

How to transform background image using CSS3 ?

Improve Article
Save Article
Like Article

In this article we will learn how to transform a background image using CSS3, The transform property in CSS is used to transform the background image. In 

Approach: The CSS transform property is used to apply the two-dimensional or three-dimensional transformation to an element. The transform property is used to rotate, scale, and skew an element.


.class_name { transform: value };

Note: Add the overflow: hidden to the parent component with transform property to avoid the overlapping effect.

Example: In this example, we are using the above-explained approach.


<!DOCTYPE html>
<html lang="en">
        div.parent {
            margin-top: 15%;
            margin-left: 10%;
        .child {
            /* transform image 50 degree */
            transform: rotate(50deg);
    <div class="parent">
            <img src=


Before transforming the background image:

After transforming the background image:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 10 May, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials