CSS background image w/ rotate, repeat and opacity

Question

I am trying to make a nice background with an image but I want the image repeated to fill the screen, with opacity set to 0.5 and it rotated 45 degrees. I have tried a number of things to accomplish this but have had no luck. Anyone have any ideas?

In this Codepen, I have the image rotated and opaque but cannot get background-repeat to work.

.background {
  height: 500px;
  width: 500px;
  position: relative;
  display: inline-block;
  padding: 100px;
  border: black 3px solid;
}

.background::before {
  content: "";
  position: absolute;
  overflow: hidden;
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0.5;
  background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg);
  background-size: contain;
  transform: rotate(45deg);
  background-repeat: repeat;
  opacity: 0.5;
}

<span class='background'>HElloWorld</span>

score 9 · Accepted Answer · answered Jun 01 '20 at 15:30

9

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>

answered Jun 01 '20 at 15:30

Temani Afif

245,468
26
309
415

great tip. I'd like to use it for the background and I mean use a small PNG and repat it but with some inclination. Can you kindly hint about this? Is it needed a wrapper DIV right after the tag? Thank you – Robert Dec 13 '21 at 21:01
keep the same code but replace `.background::before {` with `html::before {` and instead of absolute use fixed – Temani Afif Dec 13 '21 at 21:03
Thank you for this ultra-fast-prompt-reply :-) then 'background' class will be set on the , right? Thank you – Robert Dec 13 '21 at 21:05
@Robert no need it since I am targetting the html element directly. I updated the selector – Temani Afif Dec 13 '21 at 21:14
:-( it rotates the whole page content while the background remains unchanged – Robert Dec 13 '21 at 21:26
@Robert did you use the correct selector? it's `html::before {}` and not `html {}` – Temani Afif Dec 13 '21 at 21:27
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/240110/discussion-between-robert-and-temani-afif). – Robert Dec 13 '21 at 21:30
`141% ~ sqrt(2)x100%` Wow. Is THAT how geometry works? Jeez. Thanks! – Eliezer Berlin Mar 26 '23 at 15:05

score 0 · Answer 2 · answered Jun 01 '20 at 15:29

Try increasing the size of the ::before pseudo-element, and then decreasing the background size like this:

.background::before {
    content: "";
    position: absolute;
    overflow: hidden;
    width: 100%; /* made width 100% */
    height: 100%; /* made height 100% */
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 0.5;
    background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg);
    background-size: 100px; /* made background size smaller */
    transform: rotate(45deg);
    background-repeat: repeat;
    opacity: 0.5;
}

This just makes the background pseudo-element the full size of the element, and then makes the background small and repeating. I hope this helps.

CSS background image w/ rotate, repeat and opacity

2 Answers2

Linked