How to fix: Full background image distorts in IE but works fine in chrome when using background-size: cover

Question

Please have this CSS distortion I have been battling with cross browser:

https://dim.crservicesplc.ng/

Works fine in chrome but distorts in all others

chrome:

IE, Edge, Firefox

Assistance appreciated

Answer 1

You can remove the margin-left property of your "#home_main" div, and then remove the paddings of your ".wrapper .wrapper-content" and "#page_wrapper" elements, to scale the background-image to the entire width of the window.

Hope this will help !

Answer 2

References:

http://www.w3schools.com/graphics/svg_rect.asp http://www.w3schools.com/graphics/svg_fegaussianblur.asp
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur

You could control intensity of filter from stdDeviation="15" and <rect style="opacity: 0.5;" /> and color of filter from <rect style="fill: #333;>

Solution #1

#home_main {
    margin: -30px;
    background-size: cover;
    padding: 0;
    background-image: url('https://dim.crservicesplc.ng/img/bg.jpg') !important;
/*            filter: blur(2px);*/
    overflow: hidden;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
}

body {
    overflow: hidden !important;
}

#home_content {
    font-size: 12pt;
    text-align: center;
    font-weight: 600;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: none;
    font-family: 'Open Sans' !important;
    filter: initial !important;
    box-shadow: initial !important;
}

    #home_content h1 {
        color: #fff !important;
        font-size: 42px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    #home_content p {
        color: #fff !important;
    }

<div id="home_main" style="height: 613px;">
    <svg id="mySVG" width="100%" height="100%" viewBox="0 0 1131 591">
        <filter id="blurMe">
            <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
        </filter>
      <rect filter="url(#blurMe)" width="1131" height="591" style="fill: #333; opacity: 0.5;  -ms-transform: scale(3, 3); -webkit-transform: scale(3, 3); 
transform: scale(3, 3); transform-origin: center;" />
    </svg>
</div>

Solution #2

#home_main {
    margin: -30px;
    background-size: cover;
    padding: 0;
    /*background-image: url('https://dim.crservicesplc.ng/img/bg.jpg') !important;*/
/*            filter: blur(2px);*/
    overflow: hidden;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
}

body {
    overflow: hidden !important;
}

#home_content {
    font-size: 12pt;
    text-align: center;
    font-weight: 600;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: none;
    font-family: 'Open Sans' !important;
    filter: initial !important;
    box-shadow: initial !important;
}

#home_content h1 {
    color: #fff !important;
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 20px;
}

#home_content p {
    color: #fff !important;
}

<div id="home_main" style="height: 613px;">
    <svg id="mySVG" width="100%" height="100%" viewBox="0 0 1131 591">
        <filter id="blurMe">
            <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
        </filter>
        <image filter="url(#blurMe)" xlink:href="https://dim.crservicesplc.ng/img/bg.jpg" x="0" y="0" height="100%" width="100%"/>
    </svg>
</div>