css로 백그라운드만 돌리기

잘 안되네... (예제만은 잘됨.. 내꺼에는 안됨.. ㅠㅠ)

일단 핵심은 :before라는 슈도 태그 인듯..

(근데 난 d3로 svg 그리는데 zindex랑 꼬여서 영 안됨..)

body { font-family: arial, helvetica, freesans, sans-serif; font-size: 100%; color: #333; background-color: #ddd; } h1 { font-size: 1.5em; font-weight: normal; margin: 0;   text-align: center;   padding-top: 1em; } #element2 { width: 12em; font-size: 2em; text-align: center; line-height: 5em; margin: 3em auto; border: 2px solid #666; border-radius: 7px;   position: relative; overflow: hidden; } #element2:before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/background.png) 0 0 repeat; transform: rotate(45deg); }

[링크 : https://www.sitepoint.com/css3-transform-background-image/]

[링크 : https://stackoverflow.com/questions/24842026/rotate-background-image-of-div-90-degrees-using-jquery]