Skip to main content

Forums

This topic contains 7 replies, has 5 voices, and was last updated by  modi_priya 2 years, 3 months ago.

Viewing 8 posts - 1 through 8 (of 8 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 :)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star