CSS Content Image Workaround for Edge and Internet Explorer?

Question

I have a project that is working flawlessly currently in Google Chrome that uses CSS and content:url(''); to place images into pages/headers/footers.

When I test my site in Internet Explorer and Microsoft Edge, these images do not display whatsoever. I'm looking for some kind of workaround that allows me to keep the formatting I have already done as well keep the images in the CSS.

To keep this post short, I will only post a snippet of the code from an image in the footer.

#merchantFoot {
  content:url('../images/paypal.png');
  width: 40%;
  display: block;
  padding: 2%;
}

I have tried using #merchantFoot:before in this case, but my image blows up to a huge portion (I believe the original dimensions of the image) despite the styling given to this element.

Make the image a background of a :before/:after pseudo element and then size the background. [Can I change the height of an image in CSS :before/:after pseudo-elements?](https://stackoverflow.com/a/8978010/7776106) — skylize, Oct 01 '17 at 04:10
The problem won't happens on your background image, but the element that image is attached. You need to post your layout information. — sfy, Oct 01 '17 at 04:12
`content` is officially defined to work in `::before` and `::after` pseudo elements only, so the fact that it does what you want in Chrome is a fluke. It doesn't display anything in Firefox either. — Mr Lister, Oct 01 '17 at 07:32

score 1 · Answer 1 · answered Jan 06 '19 at 12:56

1

put :after or :before after your css id

#merchantFoot:after {
  content:url('../images/paypal.png');
  width: 40%;
  display: block;
  padding: 2%;
}

answered Jan 06 '19 at 12:56

Sean Bradley

3,254
1
17
10

score 0 · Answer 2 · answered Feb 05 '19 at 19:28

I had this problem on an Angular app where I was using the content attribute in CSS to dynamically set the image location based on my --deploy-url parameter

I combined a few of the comments above into the following working solution. This works for me on Edge and Chrome.

HTML

<!-- Change from img tag to div tag -->
<div id="merchantFoot"></div>

CSS

#merchantFoot{
    background-image: url('../images/paypal.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 40%;
    padding: 2%;
}

CSS Content Image Workaround for Edge and Internet Explorer?

2 Answers2