- This topic is empty.
-
AuthorPosts
-
August 16, 2016 at 2:51 pm #244608
mikehermary
ParticipantHello,
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.
August 17, 2016 at 12:06 am #244621giudev
ParticipantHi,
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 changingbackground-image: url('your-file.svg');
with
background-image: url('data:img/png;base64,=====LONG BASE 64 ENCODE HERE=====');
August 17, 2016 at 1:28 am #244623Beverleyh
ParticipantI 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?
August 17, 2016 at 2:33 am #244626mikehermary
ParticipantHello,
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.
August 17, 2016 at 2:46 am #244628Beverleyh
ParticipantI 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
August 17, 2016 at 3:17 am #244630mikehermary
ParticipantHello,
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.
October 25, 2016 at 2:15 am #247008egeo
ParticipantI had this issue, Beverleyh’s solution worked for me. Thanks for the tip
December 15, 2016 at 11:48 pm #249069modi_priya
ParticipantI had a same problem. Beverleyh’s solution worked for me :)
March 29, 2019 at 1:23 am #285680blacktree
ParticipantThank you so much! It’s working!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.