Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS SVG CSS background image not showing in Chrome

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #244608
    mikehermary
    Participant

    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.

    #244621
    giudev
    Participant

    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=====');
    
    #244623
    Beverleyh
    Participant

    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?

    #244626
    mikehermary
    Participant

    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.

    #244628
    Beverleyh
    Participant

    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

    #244630
    mikehermary
    Participant

    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.

    #247008
    egeo
    Participant

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

    #249069
    modi_priya
    Participant

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

    #285680
    blacktree
    Participant

    Thank you so much! It’s working!

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.