Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to transform background image using CSS3
The CSS transform property allows you to apply 2D and 3D transformations to elements, including background images. You can rotate, scale, translate, and skew elements to create visual effects without affecting the document flow.
Syntax
selector {
transform: none | transform-function | initial | inherit;
}
Transform Functions
| Function | Description |
|---|---|
rotate(angle) |
Rotates element by specified angle |
scale(x, y) |
Scales element along X and Y axes |
translate(x, y) |
Moves element along X and Y axes |
skew(x-angle, y-angle) |
Skews element along X and Y axes |
Example: Rotating Background Image
The following example demonstrates how to rotate a background image using the transform property
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
background-image: url('/images/logo.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transform: rotate(15deg);
margin: 50px auto;
border: 2px solid #333;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
A container with a background image rotated 15 degrees clockwise appears on the page with a black border.
Example: Scaling Background Image
This example shows how to scale a background image larger while keeping it contained
<!DOCTYPE html>
<html>
<head>
<style>
.scaled-bg {
width: 250px;
height: 150px;
background-image: url('/images/logo.png');
background-size: cover;
background-position: center;
transform: scale(1.2);
margin: 50px auto;
border: 1px solid #ccc;
overflow: hidden;
}
</style>
</head>
<body>
<div class="scaled-bg"></div>
</body>
</html>
A container with a background image scaled to 120% of its original size appears, with overflow hidden to prevent spillover.
Example: Combining Multiple Transforms
You can combine multiple transform functions to create complex effects
<!DOCTYPE html>
<html>
<head>
<style>
.combined-transform {
width: 200px;
height: 120px;
background-image: url('/images/logo.png');
background-size: cover;
background-position: center;
transform: rotate(10deg) scale(1.1) translateX(20px);
margin: 60px auto;
border: 2px dashed #666;
transition: transform 0.3s ease;
}
.combined-transform:hover {
transform: rotate(-5deg) scale(1.3) translateX(-10px);
}
</style>
</head>
<body>
<div class="combined-transform"></div>
</body>
</html>
A background image that is rotated 10 degrees, scaled to 110%, and moved 20px to the right. On hover, it changes to -5 degree rotation, 130% scale, and moves 10px to the left with a smooth transition.
Conclusion
The transform property provides powerful ways to manipulate background images and elements. Use overflow: hidden on parent containers to prevent transformed elements from extending beyond their boundaries.
Updated on: 2026-03-15T16:00:25+05:30
2K+ Views
Advertisements