SVG CSS background image not showing in Chrome

[mikehermary]

Hello,

I am using a SVG as a background image in CSS on a main container DIV called “page” and the image is not showing in Chrome for Mac or Windows 7 and 10. It is displaying properly in Safari and Firefox, Mac and Windows and IE 10 and 11. The URL can be accessed here: http://staging.flagstaff.ab.ca. There should be a “swoosh” like image displayed at the bottom of each page.

.page DIV CSS:

.page {
    overflow:hidden;
    background:url(../images/page-bg.svg) no-repeat center bottom;
    background-size:contain
}

Thanks.

[giudev]

Hi,

I believe the problem is with the SVG itself.
If you open the SVG in the browser and inspect the code you will see the svg contains just a base64 encoded PNG
http://staging.flagstaff.ab.ca/templates/base/images/page-bg.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1922" height="432" viewBox="0 0 1922 432">
  <image id="Swoosh" width="1922" height="432" xlink:href="data:img/png;base64,=====LONG BASE 64 ENCODE HERE=====" >
</svg>

Maybe some browsers/OS have problems in rendering the svg in this way.

Since it is not a real SVG just convert it in PNG and use the png instead.
Or include the base64 directly in your css by changing

background-image: url('your-file.svg');

with

background-image: url('data:img/png;base64,=====LONG BASE 64 ENCODE HERE=====');

[Beverleyh]

I believe its a syntax error in the svg file for the base64 encoded png.

Try opening the svg in a plain text editor and change this;

xlink:href="data:img/png;base64,

to this;

xlink:href="data:image/png;base64,

Does that help?

[mikehermary]

Hello,

I tried changing img to image, but it did not work, so I am assuming Chrome is having issues with the original PNG file being saved as a SVG. I have changed to using a PNG file as the background image and it works cross browser now. Thanks all for the help.

[Beverleyh]

I tried changing img to image, but it did not work

Strange – it works for me in Chrome here: http://fofwebdesign.co.uk/template/_testing/test/svg/svg.htm

[mikehermary]

Hello,

I tried adding the height value of 100vh, but that still had no effect in Chrome. There must be something that is causing the issue, but as the PNG works, I will stick with it. Thanks for your help.

[egeo]

I had this issue, Beverleyh’s solution worked for me. Thanks for the tip

[modi_priya]

I had a same problem. Beverleyh’s solution worked for me :)

[blacktree]

Thank you so much! It’s working!

[Author]

Posts