Background image transform

[deranaloge]

hi there,

i have a section with a background image wich i would rotate 90° on devices below 768px.

i tried this code in Section=>Customize=>ElementCSS but it does not work.

@media (max-width: 767px)  {
   $el .x-bg .x-bg-layer-lower-image {
     -moz-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     -o-transform: rotate(90deg);
     -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
   }
}

do you now what i am doing wrong?

thanks in advance

[rad]

Hi Harald,

Thanks for reaching out.

It’s a bit tricky since it’s a parallax. How about this?

@media (max-width: 767px)  {
   $el .x-bg {
     -moz-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     -o-transform: rotate(90deg);
     -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
   }
}

This should have no conflict with the parallax.

Thanks!

[deranaloge]

hi rad,

that worked, but now the background-image is not covering the whole section. its cutted.

is it easier when parallax is tunred of on mobile? can i overrule this in the element css?

thanks in adavance

[ruenel]

Hello Harald,

The background image will always be cut off because as soon as the .x-bg element is rotated to 90 degrees, the width becomes the height and the height will become the width. Since the width is much shorter than the height, this is why it displays like it is cut.

Rotating the container is not the best idea. I would highly recommend that you swap the background image instead with an image that display upright. You can make use something like this instead:

@media (max-width: 767px){
  .e7-86 .x-bg .x-bg-layer-lower-image {
    background-image: url(path of the upright image) !important;
    background-position: top center;
  }
}

We would loved to know if this has work for you. Thank you.

[deranaloge]

hi ruenel,

thanks for the code. with some minor modifcations it works now really well!

@media (max-width: 767px){
  $el .x-bg .x-bg-layer-lower-image {
    background-image: url("image") !important;
    background-position: top center;
    background-size: 100vh !important;
  }    
}

thanks again for your help
cheers

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.