Trying to hide a background image on mobile site

Ask the community
,
1

I’m trying to optimize my site for mobile, but there is a very large background image that is loading on the mobile site and it doesn’t even need to be there. I’d like to hide the image, but can’t figure out how to do it and thinking it might not be possible without hiding the entire strip.

This is the page - https://www.dogandcathospital.ca/

The background image shows behind the two boxes that are titled “Stay Well Plans” and “See Your Pet on Petly”.

Is there anything I can do about this?

2

Hi Dave,

Wix code is all about letting you add your javascript code to the website. you can refer to elements on your website by their given id - for example $w(‘#columnStrip4’);
now, you can $w(‘#columnStrip4’).hide(); or show that element as a condition by the context, for example if the current view is mobile or desktop.

hope i got your question right,
Shlomi

3

Hi Shlomi,

Thanks for the response.

I like your idea, but I don’t think it solves my problem. I could hide the background image using javascript, but it wouldn’t prevent the image from loading on the page, correct? And the loading of the image is the problem as it is quite large and takes a long time to load on mobile devices.

Dave

4

Have you tried to just remove the image on the mobile view?
You can remove it from mobile but still have it on desktop, without coding. It is a built in feature in the mobile editor.

5

@yoav - The image is actually a background image of a Strip. So I would have to remove the strip to remove the background image, which I don’t want to do.

6

I was actually offering to add the background for non mobile after page load, while its default is no image, will that do the trick?

7

@Shlomi - Ah, that is a great idea, I just wasn’t smart enough to get what you were saying. I will try that!

8

@Shlomi I tried your idea, but the problem is that when you add javascript via the html element, it only applies to the html within the element. This would work just fine, however, the background image needs to stretch to full width across the page and the html element doesn’t have the stretch feature.

Let me know if you have any other ideas. Thanks for the help!

9

dave,

i have missed your intention when referring to ‘via the html element’.
did you do something like this?
$w.onReady(function () {
$w(‘#columnStrip4’).show();
});
when hidden on load?

10

Hi Shlomi,

I used the “HTML code” element/block to include the javascript code on the home page. Is there another way to include javascript on the page?

11

Hi guys,

isn’t hiding and showing the strip too much? It affects the whole strip which probably contains something. This is what you could do in the mobile editor anyway. So, what is needed is a function that changes the bacground from solid color to the image on the desktop view.