How to rotate the background image in the container

Question

I want to rotate the image which is placed in the button of scrollbar in Chrome  Now I have a CSS with this content     -webkit-scrollbar-button vertical decrement       background-image url images arrowup png        -webkit-transform rotate 120deg       -moz-transform rotate 120deg       background-repeat no-repeat      background-position center      background-color  ECEEEF      border-color  999      I wish to rotate the image without rotating its content

User · Answer

Update 2020  May   Setting position  absolute and then transform  rotate 45deg  will provide a background    x000D   x000D  div   x000D    height  200px  x000D    width  200px  x000D    outline  2px dashed slateBlue  x000D    overflow  hidden  x000D    x000D  div img   x000D    position  absolute  x000D    transform  rotate 45deg   x000D    z-index  -1  x000D    top  40px  x000D    left  40px  x000D    x000D   lt div gt  x000D     lt img src  https   placekitten com 120 120    gt  x000D     lt h1 gt Hello World  lt  h1 gt  x000D   lt  div gt  x000D   x000D   x000D    Original Answer   In my case  the image size is not so large that I cannot have a rotated copy of it   So  the image has been rotated with photoshop   An alternative to photoshop for rotating images is online tool too for rotating images   Once rotated  I m working with the rotated-image in the background property   div with-background       background-image  url  img rotated-image png       background-size      contain      background-repeat    no-repeat      background-position  top center      Good Luck

User · Answer

CSS    reverse     transform  rotate 180deg       rotate     animation-duration   5s    animation-iteration-count  1    animation-name  yoyo    animation-timing-function  linear      keyframes yoyo     from   transform  rotate   0deg       to     transform  rotate 360deg         Javascript     buttonElement  click function            arrow   toggleClass  reverse      return false       buttonElement  hover function            arrow   addClass  rotate      function           arrow   removeClass  rotate        PS  I ve found this somewhere else but don t remember the source

User · Answer

Very well done and answered here -  http   www sitepoint com css3-transform-background-image    myelement before       content          position  absolute      width  200       height  200       top  -50       left  -50       z-index  -1      background  url background png  0 0 repeat      -webkit-transform  rotate 30deg       -moz-transform  rotate 30deg       -ms-transform  rotate 30deg       -o-transform  rotate 30deg       transform  rotate 30deg

User · Answer

I was looking to do this also  I have a large tile  literally an image of a tile  image which I d like to rotate by just roughly 15 degrees and have repeated  You can imagine the size of an image which would repeat seamlessly  rendering the  image editing program  answer useless   My solution was give the un-rotated  just one copy    tile image to psuedo  before element - oversize it - repeat it - set the container overflow to hidden - and rotate the generated  before element using css3 transforms  Bosh

User · Answer

Very easy method  you rotate one way  and the contents the other  Requires a square though   element      background   url  someImage jpg       element hover      transform  rotate -30deg      element hover  gt        transform  rotate 30deg

[css] How to rotate the background image in the container?

Update 2020, May:

Original Answer:

Examples related to css

Examples related to background-image

Examples related to image-rotation