Skip to content
Related Articles

Related Articles

How to transform background image using CSS3 ?

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 22 Mar, 2021

The transform property in CSS is used to transform the background image. In this article, the task is to transform the background image.

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.



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


  • Before transform the background image:

  • After transform the background image:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!