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.

I'd like to do this as well. There's an example of something like this happening on iCloud - see how the vault texture rotates dynamically: https://www.icloud.com/ — Subcreation, May 12 '12 at 00:31
that looks kinda like a parallax thing. couldn't really tell from the code though... — sheriffderek, Jul 17 '12 at 00:01
I guess that maybe you no longer need and answer but maybe someone else would be interested. Here is a link for a tutorial that shows how to do it : [http://www.sitepoint.com/css3-transform-background-image/](http://www.sitepoint.com/css3-transform-background-image/) — Ayoub M., Oct 14 '12 at 01:41
Unfortunately all of the provided solutions do not work in scroll bars. I ended up creating 4 separate pictures. — amoebe, Feb 05 '15 at 18:46
See also: [Rotating a background image with CSS3](http://stackoverflow.com/q/15170820/1591669) — unor, Feb 14 '15 at 00:51

score 186 · Answer 1 · edited Jul 09 '22 at 13:10

186

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;
    transform: rotate(30deg);
}

edited Jul 09 '22 at 13:10

Martijn

15,791
4
36
68

answered Mar 06 '13 at 15:20

Anmol Saraf

15,075
10
50
60

2

FYI, containers rotate about their center point, in case you're having trouble getting exactly the transformation you want. – Nick Larsen Jul 21 '14 at 14:06
fyi, it doesn't work for all elements; for example, a `select` can't have a `:before`. – Yann Dìnendal Apr 10 '15 at 14:41
1

Also, beware that 200% may not be enough in all cases, i.e. on oblong elements like 10px × 200px. – Henrik Christensen Feb 29 '16 at 07:19
14

Yeah, but this is _not_ rotating the background. This is faking it with an approximation. If you actually need the background to be rotated this will not help. – dev_willis Feb 06 '18 at 02:34

score 35 · Answer 2 · answered May 13 '14 at 10:55

35

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 >*{
    transform: rotate(30deg);
}

answered May 13 '14 at 10:55

Martijn

15,791
4
36
68

Aakash · Answer 3 · 2020-05-12T05:52:15.217

Update 2020, May:

Setting position: absolute and then transform: rotate(45deg) will provide a background:

div {
  height: 200px;
  width: 200px;
  outline: 2px dashed slateBlue;
  overflow: hidden;
}
div img {
  position: absolute;
  transform: rotate(45deg);
  z-index: -1;
  top: 40px;
  left: 40px;
}

<div>
  <img src="https://placekitten.com/120/120" />
  <h1>Hello World!</h1>
</div>

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...

score 8 · Answer 4 · edited Nov 24 '18 at 22:41

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

score 5 · Answer 5 · answered May 23 '12 at 09:21

5

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!

answered May 23 '12 at 09:21

Simon Seddon

59
1
1

i can't "imagine the size of an image which would repeat seamlessly" being very big... – sheriffderek Jul 16 '12 at 23:57
1

what if you want your base background image to be tilted? – Jason Sep 09 '12 at 20:33

score 1 · Answer 6 · edited Dec 23 '21 at 20:58

I tried all solutions but none helped, below is what was my problem and how I solved it:

Problem: we have an image for desktops with landscape orientation but To show the same image but rotated (portrait) for mobile screens.

How: I just rotated the actual image in my assets folder the way I wanted (portrait), and then just used media queries to call that image for my background for mobiles, and that's it.

(this was the easiest and quick solution I did.)

score -1 · Answer 7 · answered Sep 01 '21 at 14:19

try making a div for the image only and then flipping it with transform: scaleY(-1); or transform: scaleX(-1); if you want to have the navbar in front of the image you can make an overlapping div and set its opacity property to 0;

score -3 · Answer 8 · answered Dec 13 '21 at 20:45

-3

Update Dec 2021

Since the original question is "..rotate the background image .."

The best answer looks to be here https://stackoverflow.com/a/62135576/3446280

answered Dec 13 '21 at 20:45

Robert

490
1
5
17

How to rotate the background image in the container?

8 Answers8

Update 2020, May:

Original Answer:

Update Dec 2021

Linked

Related