DEV Community

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

Posted on • Updated 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)