CODEWITHSUNDEEP
cssinternet-explorer-11
Dinkheller
Dinkheller

Reputation: 5054

IE 11 :after background size not working

I added a background-image inside the pseudo :after

::after {
  content: '';
  display: block;
  position: absolute;
  right: -2.5rem;
  bottom: -1.5rem;

  height: 9.5rem;
  width: 9.5rem;
  background-image: url('../img/icons/icon_logo.svg');
  background-repeat: no-repeat;
  // background-size: 100% auto;
  background-size: cover;
}

But the image is way bigger than the actual size of the box.

Any idea how to solve this?

(Working fine in webkit browsers)

!!!Additional Information:

I tried other svg and it works great.

Works: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
  <path fill="#FF6C00" d="M0 0h64v64H0z"/>
  <path fill="#FFF" d="M33 0C22 0 13 9 ..."/>
</svg>

Does not work:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
  <path fill="#FFF" d="M0 0h64v64H0z"/>
  <defs>
       <path id="a" d="M0 0h64v64H0z"/>
  </defs>
  <clipPath id="b">
       <use xlink:href="#a" overflow="visible"/>
  </clipPath>
  <path fill="#277052" d="M43.7 51.8s-...."/>
  <defs>
       <path id="c" d="M0 0h64v64H0z"/>
  </defs>
  <clipPath id="d">
       <use xlink:href="#c" overflow="visible"/>
  </clipPath>
  <path fill="#EE7203" d="M40.7 28.7c0 4.8-3..." clip-path="url(#d)"/>
  <path fill="#1D1D1B" d="M43 10.9c.2.1.4 0..." clip-path="url(#d)"/>
</svg>

Upvotes: 1

Views: 3059

Answers (3)

Dinkheller
Dinkheller

Reputation: 5054

Read this link

Adobe Illustrator give me four options to declaring style sheet properties when saving graphics as an SVG file

  • Presentation Attributes

  • Style Attributes

  • Style Attributes (Entity Reference)

  • Style Elements

No problem using the first three ways to styling properties, but embedding style sheets into SVG content inside a element cause the problem!

Upvotes: 2

rrd
rrd

Reputation: 5967

Try adding in display:block to the css.

Upvotes: 0

Saw
Saw

Reputation: 61

I had similar issues rendering CSS in IE. My solution:

  • Make sure you have a <!DOCTYPE> declaration before your html
  • Add the meta tag <meta http-equiv="X-UA-Compatible" content="IE=edge" > (this makes sure that your code always renders the cutting edge or most updated version of internet explorer; else, it can render from older versions and things get really messy.)

I hope that helps.

Upvotes: 0

Related Questions