How to Rotate Container Background Image using CSS ? Last Updated : 07 Oct, 2024 Comments Improve Suggest changes Like Article Like Report 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 PropertyThe 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> Output: Rotate Container Background Image using CSS Example Output Comment More infoAdvertise with us Next Article How to Rotate Container Background Image using CSS ? gurrrung Follow Improve Article Tags : Web Technologies CSS CSS-Misc Similar Reads How to Change Background Images on Scroll using CSS? Background images are crucial in web development, significantly enhancing the user experience. Using background images on a webpage can effectively showcase a brand or convey specific messages. Here, we will explore how to change background images on scroll using CSS. ApproachThe HTML includes a spa 2 min read How to create texture background using CSS ? Introduction: We can use CSS property to texture the background of the web page by using an image editor to cut out a portion of the background. Apply CSS background-repeat property to make the small image fill the area where it is used. CSS provides many styling properties of the background includi 3 min read How to transform background image using CSS3 ? 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 propert 1 min read How to set multiple background images using CSS? The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images. The used background property are listed below: backgr 2 min read How to Fit Background Image to Div using CSS? To fit a background image to a div using CSS, you can utilize the background-size property. Here are some approaches:1. Using background-size: cover;This method scales the background image to cover the entire div, maintaining the image's aspect ratio.HTML<html> <head> <style> .back 2 min read How to create a skewed background using CSS ? A skewed background design enhances a website's visual appeal with dynamic, angled elements. By using CSS transform: skew() along with ::before and ::after pseudo-elements, you can easily create a slanted effect, adding a modern and engaging look to your site's layout.ApproachHTML Structure - Sectio 2 min read How to stretch and scale background image using CSS? The background-size property is used to stretch and scale the background image. This property set the size of the background image. Here we will see all possible examples of background-size and background-scale properties. Syntax: background-size: auto|length|cover|contain|initial|inherit;cover: Thi 2 min read How to change the position of background image using jQuery ? In this article, we will see how to change the position of the background image using jQuery. To change the position of the background image, we will use css() method with float property. The css() method is used to change the style property of the selected element. The float property is used to cha 2 min read How to Set background Image using jQuery css() Method ? This article will show you how to set the background image using jQuery. To set the background image, we are using the jQuery css() method. jQuery css() MethodThis method sets/returns one or more style properties for the specified elements. Syntax: Return a CSS property:$(selector).css("propertyname 2 min read How to set background-image for the body element using CSS ? In this article, we set the image into the background using CSS property. The background-image property is used to set one or more background images to an element. By default, it places the image in the top left corner. To specify two or more images, separate the URLs with a comma. Syntax: backgroun 2 min read Like