Image to fill column background

Support
#1

Hey there, I’ve got a site that’s still on v4, and I’m employing a technique to use a transparent image mask over a video background in a Cornerstone section. (First thing you see at https://nueramarketing.com)

The problem is that the image doesn’t scale to the full browser width on IE. How would I force that function in IE by adapting the following code?

/* Photo Fill */
    @media(min-width: 100px){
      .photo {
        margin: 0px;
        width: 100%;
        background-image: url(https://nueramarketing.com/wp-content/uploads/2017/08/VideoMask4.svg);
        background-size: cover;
        background-position: 50%;
      }

      .photo img{
        opacity: 0;
        visibility: hidden;
      }
    }
#2

Hi @Nuera,

Thanks for writing in

IE is very quite a problem with CSS. In this case, you can check the link below on how to fix it.

Let us know how it goes.

Thanks.

#3

Hi Nico,

Unfortunately, I can’t actually interpret code very well. Would you mind at least helping me reconcile that solution with the existing code block?

I assume we’ll have to create some kind of media query based on the browser, but I’m just not sure what would go into creating that.

Thanks in advance!

#4

Hi there,

Please try the PNG image instead of SVG, SVG doesn’t respond well in other browsers (eg. IE and Safari) when it comes to CSS.

Thanks!

#5

YEP! That was it. Thanks so much Iam!

I was actually able to reduce the size of the file from 80kb to 28kb too by switching to PNG, so that was an nice side effect as well.

#6

You’re welcome.