Rotating a Background Image with CSS3

CSS background image w/ rotate, repeat and opacity

You can do it like below:

.background {

  height: 500px;

  width: 500px;

  position: relative;

  z-index:0;

  display: inline-block;

  overflow:hidden; /* hide the overflow here not on the pseudo element */

  padding: 100px;

  border: black 3px solid;

}

.background::before {

  content: "";

  position: absolute;

  z-index: -1;

  /* 141% ~ sqrt(2)x100% to make sure to cover all the area after the rotation */

  width: 141%;

  height:141%;

  /**/

  /* to center*/

  left: 50%;

  top: 50%;

  /* */

  background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg);

  background-size: 100px 100px; /* size of the image*/

  transform:translate(-50%,-50%) rotate(45deg); /* center the element then rotate */

  opacity: 0.5;

}

<span class='background'>

    HElloWorld

  </span>

Rotating a background image with CSS3

you could use the ::after (or ::before) pseudo-element, to generate the animation

div /*some irrelevant css */
{
    background:-webkit-linear-gradient(top,orange,orangered);
    background:-moz-linear-gradient(top,orange,orangered);
    float:left;padding:10px 20px;color:white;text-shadow:0 1px black;
    font-size:20px;font-family:sans-serif;border:1px orangered solid;
    border-radius:5px;cursor:pointer;
}

/* element to animate */
div::after               /* you will use for example "a::after" */
{
    content:' ►';        /* instead of content you could use a bgimage here */
    float:right;
    margin:0 0 0 10px;
    -moz-transition:0.5s all;
    -webkit-transition:0.5s all;
}

/* actual animation */
div:hover::after         /* you will use for example "a.selected::after" */
{
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

HTML:

<div>Test button</div>

in your case you will use element.selected class instead of

jsfiddle demo: http://jsfiddle.net/p8kkf/

hope this helps

rotating background image with css for img

CSS transforms always apply to an element. If you want to rotate two things separately you need to create two elements:

<div id="frame"><img id="logo"></div></div>

Now you can use the CSS transform to rotate the #logo inside the #frame.

Demo on JSFiddle

http://jsfiddle.net/bikeshedder/c6KUP/8/

How to rotate background-image in css?

"The img is pushed down ie not at the top left position in the grid anymore"

It's because you're using translateX, if you want just to rotate the image, don't move it, use only transform: rotate:

* {

  padding: 0;

  margin: 0;

}

.rotate_ninety {

    -moz-transform: rotate(90deg);

    -webkit-transform: rotate(90deg);

    -o-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    transform: rotate(90deg);

}

<img src="https://www.w3schools.com/angular/pic_angular.jpg" class="rotate_ninety">

CSS3 transition on a background image

Sure you can, try something like this:

HTML

<div id="planet">
</div>

CSS

#planet { 
    width:200px;
    height:200px;
    background: transparent url(http://cdn3.iconfinder.com/data/icons/nx11/Internet%20-%20Real.png) no-repeat center center;
}

#planet {
  -webkit-animation-name: rotate;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -moz-animation-name: rotate;
  -moz-animation-duration:2s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;
}

@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(0deg);}
  to {  -webkit-transform:rotate(360deg);}
}

@-moz-keyframes rotate {
  from {-moz-transform:rotate(0deg);}
  to {  -moz-transform:rotate(360deg);}
}

JSFiddle

CSS: background-image rotate without transform: rotate()

To do that, remove the rotation from the CSS of the .bg class and increase its height from 170% to 225%:

.bg {
    background-image: url(http://bagrattam.com/website/images/other/paint.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -50%;
    left: -10%;
    right: -10%;
    height: 225%;
    z-index: -1;
    transform: rotate(0deg);
}

Then use the :after pseudo class to add a rotated overlay over the image which adds the skew effect:

.bg:after {
    content: "";
    font-size: 200px;
    background: #ffffff;
    display: block;
    position: absolute;
    height: 500px;
    left: 0;
    right: 0;
    bottom: -350px;
    transform: rotate(-8deg);
}

Here's what it looks like now:

Hope this helps :)

How do I rotate a image background on a select element?

You need to switch from an image to another , rotation is not avalaible for background-image

example

select{

  border: 1px solid #ccc;

  padding: 5px 35px 5px 5px;

  width:150px;

  height: 40px;

  background-color: #eee;

  color: black;

  font-size: 16px;

  -moz-appearance: none;

  -webkit-appearance: none;

  appearance: none;

  background:  url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyLjAwMyA1MTIuMDAzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIuMDAzIDUxMi4wMDM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwb2x5Z29uIHN0eWxlPSJmaWxsOiNBNEMyRjc7IiBwb2ludHM9IjQzMi43NjQsMjU2LjAwMyA3OS4yNCw0OTkuODEzIDc5LjI0LDI2MC40NDEgNzkuMjQsMTIuMTk0IAkiLz4NCgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRTNFN0YyOyIgcG9pbnRzPSI3OS4yNCw1NC4yMjcgNzkuMjQsNDU3Ljc4IDM3MS44MTEsMjU2LjAwMyAJIi8+DQoJPHBhdGggc3R5bGU9ImZpbGw6IzQyOERGRjsiIGQ9Ik03OS4yNCw1MTIuMDAzYy0zLjIzNCwwLjAwMy02LjMzNi0xLjI4MS04LjYyMy0zLjU2N2MtMi4yODctMi4yODctMy41Ny01LjM4OS0zLjU2Ny04LjYyM1YxMi4xOTQNCgkJYy0wLjAwMi00LjUzMiwyLjUxLTguNjksNi41MjItMTAuNzk3YzQuMDEyLTIuMTA3LDguODYyLTEuODE0LDEyLjU5MSwwLjc2MWwzNTMuNTI0LDI0My44MWMzLjI5OSwyLjI3Niw1LjI2OCw2LjAyOCw1LjI2OCwxMC4wMzYNCgkJYzAsNC4wMDgtMS45NjksNy43NTktNS4yNjgsMTAuMDM2TDg2LjE2Miw1MDkuODQ5Qzg0LjEyNiw1MTEuMjUxLDgxLjcxMiw1MTIuMDAzLDc5LjI0LDUxMi4wMDN6IE05MS40MywzNS40MDh2NDQxLjE5DQoJCWwzMTkuODYzLTIyMC41OTVMOTEuNDMsMzUuNDA4eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=) 90% / 12% no-repeat #eee ;

  

}

select:focus {

background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyLjAwMyA1MTIuMDAzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIuMDAzIDUxMi4wMDM7IiB4bWw6c3BhY2U9InByZXNlcnZlIiA+DQo8ZyBzdHlsZT0idHJhbnNmb3JtOnJvdGF0ZSg5MGRlZyk7dHJhbnNmb3JtLW9yaWdpbjo1MCUgNTAlIj4NCgk8cG9seWdvbiBzdHlsZT0iZmlsbDojQTRDMkY3OyIgcG9pbnRzPSI0MzIuNzY0LDI1Ni4wMDMgNzkuMjQsNDk5LjgxMyA3OS4yNCwyNjAuNDQxIDc5LjI0LDEyLjE5NCAJIi8+DQoJPHBvbHlnb24gc3R5bGU9ImZpbGw6I0UzRTdGMjsiIHBvaW50cz0iNzkuMjQsNTQuMjI3IDc5LjI0LDQ1Ny43OCAzNzEuODExLDI1Ni4wMDMgCSIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiM0MjhERkY7IiBkPSJNNzkuMjQsNTEyLjAwM2MtMy4yMzQsMC4wMDMtNi4zMzYtMS4yODEtOC42MjMtMy41NjdjLTIuMjg3LTIuMjg3LTMuNTctNS4zODktMy41NjctOC42MjNWMTIuMTk0DQoJCWMtMC4wMDItNC41MzIsMi41MS04LjY5LDYuNTIyLTEwLjc5N2M0LjAxMi0yLjEwNyw4Ljg2Mi0xLjgxNCwxMi41OTEsMC43NjFsMzUzLjUyNCwyNDMuODFjMy4yOTksMi4yNzYsNS4yNjgsNi4wMjgsNS4yNjgsMTAuMDM2DQoJCWMwLDQuMDA4LTEuOTY5LDcuNzU5LTUuMjY4LDEwLjAzNkw4Ni4xNjIsNTA5Ljg0OUM4NC4xMjYsNTExLjI1MSw4MS43MTIsNTEyLjAwMyw3OS4yNCw1MTIuMDAzeiBNOTEuNDMsMzUuNDA4djQ0MS4xOQ0KCQlsMzE5Ljg2My0yMjAuNTk1TDkxLjQzLDM1LjQwOHoiLz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg==) 90% / 12% no-repeat #eee ;

<select>

    <optgroup label="Ultra Secret">

      <option>007</option>

      <option selected>MIB</option>

      <option>u mom Alien</option>

      <option>no u</option>

  </optgroup>

  

  <optgroup label="Something Important">

      <option>Item 1</option>

      <option>Item 2</option>

      <option>Item 3</option>

      <option>Item 4</option>

      <option>Item 5</option>

  </optgroup>

</select>

---

Related Topics