DEV Community

Cover image for How to Rotate Background Image
Abdullah Furkan Özbek
Abdullah Furkan Özbek

Posted on Edited on

How to Rotate Background Image

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

Top comments (0)