Preventing background image from appearing sideways

javascriptcoding5678 · June 30, 2021, 1:34pm

How would I add a background image to this without the image appearing sideways?


.circle {
    width: 150px;
    height: 150px;
    background: red;
    border-radius: 50%;
    padding: 20px;
    box-sizing: border-box;
    background-image: url("https://via.placeholder.com/150");
    background-repeat: no-repeat;
    background-size: cover;
}

MarekMac · June 30, 2021, 2:40pm

Hello @javascriptcoding5678

I found out you are using transform: rotate(45deg); on your grid class
you would like either change that or add another transform rotate on your circle class with degrees you like

javascriptcoding5678 · June 30, 2021, 2:43pm

Yes, how would I be able to remove transform from the entire code?

I was wondering if that was possible to do.

MarekMac · June 30, 2021, 2:48pm

Hi @javascriptcoding5678

Just comment it out or delete line commented on below screenshot

javascriptcoding5678 · June 30, 2021, 2:51pm

Then what?

Code: https://jsfiddle.net/qbj2c0og/

What will I be replacing transform with?

Would I be utilizing Grid to do that?

MarekMac · June 30, 2021, 2:54pm

It fixed issue you were looking help with.
I am not sure what would you like with it further

if you wish, feel free to send me a DM

Thank you

BenGitter · June 30, 2021, 3:01pm

It is not clear what you exactly want. Do you want the background image without rotation, while the rest is rotated as it is in your original code?

javascriptcoding5678 · June 30, 2021, 3:03pm

I wanted to keep this:
transform: rotate(45deg);

But I wanted the background image to appear normal, and not rotated.

BenGitter · June 30, 2021, 3:06pm

Ah okay, I don’t think there is CSS property for this. But you can achieve the same effect by wrapping your .grid in other div with the exact same size, and set the background-image on the wrapper.

jaycrowder · June 30, 2021, 7:49pm

Hi is this what you are trying to accomplish?

If so I can go ahead and send you the code!!

javascriptcoding5678 · July 1, 2021, 12:16am

Yes!!! That is exactly what I have been trying to accomplish.

What is the code you used to do that?

And thank you.

jaycrowder · July 1, 2021, 2:07am

Sure!
First I set .grid. transform: rotate(0deg);
Second, to .item : margin: 7px;
Third I created a new

class called rotate in the HTML
Fourth I set transform: rotate(49deg) , to .rotate class in CSS!!
You can resize the diamonds to your liking etc!

javascriptcoding5678 · July 1, 2021, 7:10am

Is this what you mean?

or, do I not need to do all that?

Can it be done with less code?

Code: https://jsfiddle.net/fns61pe0/

.grid {
  display: grid;
  margin: 5%;
  grid-template-columns: auto auto auto;
  background-color: black;
  transform: rotate(45deg);
}

.circle {
  width: 150px;
  height: 150px;
  background: transparent;
  padding: 8px;
  box-sizing: border-box;
  position: relative;
}

.circle::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url("https://via.placeholder.com/150");
  transform: rotate(-45deg);
  border-radius: 50%;
}

.item {
  position: relative;
  z-index: 2;
  margin: auto;
  transform: rotate(315deg);
}

<div class="grid circle">

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

</div>

javascriptcoding5678 · July 1, 2021, 5:21pm

Or did you mean something like this?

Code: https://jsfiddle.net/fy84h09z/


.grid {
  display: grid;
  margin: 5%;
  grid-template-columns: auto auto auto;
  background-color: black;
  transform: rotate(45deg);
}

.circle {
  width: 150px;
  height: 150px;
  background: red;
  border-radius: 50%;
  padding: 20px;
  box-sizing: border-box;
  background-image: url("https://via.placeholder.com/150");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.back {
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: green;
  transform: rotate(-45deg);
}

.item {
  transform: rotate(315deg);
  margin: auto;
}

<div class="grid circle">
<div class="back circle"></div>


  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>


</div>

BenGitter · July 1, 2021, 7:17pm

I was thinking of the second one (using another div), but the first one (using ::before) might be slightly nicer, since you don’t have to use an extra div.

You can of course also use the approach from the other topic, where you don’t use transform.

system · December 31, 2021, 7:17am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.