DEV Community

loading...
Cover image for How to Rotate Background Image

How to Rotate Background Image

Abdullah Furkan Özbek
Front End Developer 👨🏻‍💻 | Cosmos Enthusiast 🌌 | Loves React and Javascript 🧡
Updated on ・1 min read

It is as simple as adding a before or after element inside a container

.container {
  position: relative;
  overflow: hidden;
}

.container::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: url(background.jpg) 0 0 repeat;
  transform: rotate(30deg);
}

Enter fullscreen mode Exit fullscreen mode

Discussion (0)