SVG Background displaying incorrectly...

User 2876353 Photo


Registered User
7 posts

All

I did a search of the forums and didn't see anything so I thought I'd ask. For awhile now I've been using a free template (Under Construction) for new domains before publishing. I've been developing mainly on Windows but recently moved to using Site Designer on Mac. I just noticed that SVG background images aren't displaying in Safari. I'm assuming this has always been the case and I've simply never looked as I was not on a Mac. Looks like they display fine in Mobile Safari. Any ideas?

Thanks
User 2699991 Photo


Registered User
4,879 posts
Online Now

Attach a screen shot of your project file HIGHEST BREAKPOINT that might help our crystal ball clear a bit ;) (inlude the right styling tab in thescreenshot)
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
User 2876353 Photo


Registered User
7 posts

Wayan

Thanks for the reply. Here's the SS. Also to be clear this is working on all other browsers just not Safari on Mac.

Dan
Attachments:
User 2699991 Photo


Registered User
4,879 posts
Online Now

Dan Reese wrote:
Wayan

Thanks for the reply. Here's the SS. Also to be clear this is working on all other browsers just not Safari on Mac.

Dan


That's a bad link
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
User 2699991 Photo


Registered User
4,879 posts
Online Now

Try this

https://css-tricks.com/snippets/htacces … tent-type/

Or this
if the element that has the background image is set to width and height = auto

set that element to a specific width and height
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
User 2699991 Photo


Registered User
4,879 posts
Online Now

But then of course safari is no longer supported by apple anyway, so you might have to convert the image to another format (WEBP for instance (or you might have to do it as a JPG or PNG first them make it a WEBP)

I don't have safari so can't check it out and even if I did or someone has it would need to be the latest version before they stopped supporting it, in order to check it out,, and they would need a link to the live web page to see if it works on their version..
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
User 2699991 Photo


Registered User
4,879 posts
Online Now

While you are fiddling with setting the container background width & height, also try changing it from cover( if it is indeed set to cover) to custom 100% top left or right and fixed (if not already set to fixed)

That's it for me now run out of possible solutions so without seeing the project file now can't come up with any other possible solution.

Well I have one more but then you probably wouldn't like it :D:cool: (it involves taking a walk along side a fast flowing river with a certain apple product in one hand, with a cheddar cheese and beetroot sandwich in the other at the end of your walk you are empty handed and not feeling hungry any more.)
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
User 10077 Photo


Senior Advisor
1,096 posts

Dan,

I’m an Apple user. If you can post the URL of the page that is not displaying the svg, I’ll be glad to take a look at it.

Brian

Side Note: Apple does support Safari on Apple devices, just not on Windows.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
User 2699991 Photo


Registered User
4,879 posts
Online Now

Brian Durfee wrote:

Side Note: Apple does support Safari on Apple devices, just not on Windows.

OOPS I meant some websites don't support (as in display) safari on some versions of older versions of safari
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
User 2876353 Photo


Registered User
7 posts

Thanks for the responses. it was a safari issue on my end. Installing the most recent update corrected the issue.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.