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


please have css distortion have been battling cross browser:

https://dim.crservicesplc.ng/

works fine in chrome distorts in others

chrome: enter image description here

ie, edge, firefox enter image description here

assistance appreciated

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 control intensity of filter stddeviation="15" , <rect style="opacity: 0.5;" /> , color of filter <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>


-

Comments

Post a Comment

Popular posts from this blog

unity3d - Rotate an object to face an opposite direction -

i have object , b. when click on object b, rotates object b (a faces b). b doesn't face a. need following : when faces b, need face opposite direction. have code rotating @ b. how rotate face opposite direction after that? vector3 targetdirection = target - transform.position; float step = speed * time.deltatime; vector3 newdirection = vector3.rotatetowards (turretdome.transform.forward, targetdirection, step, 0.0f); turretdome.transform.rotation = quaternion.lookrotation (newdirection); you object facing object b, want inverse direction of object after that? objecta.transform.rotation = quaternion.inverse(objecta.transform.rotation) but lets assume example turretdome object a, (negate direction): turretdome.transform.rotation = quaternion.lookrotation (-newdirection); naturally, both of these snippets not show how smoothen rotation, seem know how use time.deltatime. just incase unsure, quaternion.lerp this
Read more

angular - Is it possible to get native element for formControl? -

i've got angular2 reactive form . created formcontrol s , assigned input fields by [formcontrol]=... . understand creates nativeelement <-> formcontrol link. my question: possible nativeelement formcontrol ? wanna myformcontrol.nativeelement.focus() i can share 1 terrible solution works me. in reactive forms can use either 1) formcontroldirective ts mycontrol = new formcontrol('') template <input type="text" [formcontrol]="mycontrol"> or 2) formcontrolname ts myform: formgroup; constructor(private fb: formbuilder) {} ngoninit() { this.myform = this.fb.group({ foo: '' }); } template <form [formgroup]="myform"> <input type="text" formcontrolname="foo"> </form> so these directives write patch like 1) formcontroldirective const originformcontrolngonchanges = formcontroldirective.prototype.ngonchanges; formcontroldirective.proto
Read more

javascript - Why jQuery Select box change event is now working? -

i working on product filters user select select box according his/her preference not getting selected value user in jquery. html code:- <select name="product_filter" id="product_filter"> <option value="price_low_first">price : low high</option> <option value="price_high_first">price : high low</option> <option value="latest">latest</option> <option value="popular">most popular</option> </select> jquery code: $(function () { $("#product_filter").change(function () { alert("hi") var selectedtext = $(this).find("option:selected").text(); var selectedvalue = $(this).val(); alert("selected text: " + selectedtext + " value: " + selectedvalue); }); }); hi believe code perfect. once please check jquery.min.js
Read more