Default background for mobile splash page

[Albecess]

Hi! I'll outline my problem briefly.

Currently i'm using this page https://www.medyca.it/splash.html as a landing page, and it's the only splash page i have in my site.

The background is a nice picture strictly related to my core business, and it looks great on desktop.

However, from mobile it's being cut, and it's become pointless to have (and increase loading time for users and SEO) - and would rather have a blank background or something more adapt to mobile, as the original background picture is quite big and I'm afraid it will only end up slowing down loading speed on mobile.

So, i'm wondering - is there a way of selecting 2 separate splash page backgrounds - one for mobile, and one for desktop / bigger screens?

I already use the Hide app to make such customisation to differentiate between mobile/desktop, but I'm afraid that cannot be done for the background of the page.

My main goal is SEO optimisation, and as I understand certain issues cannot be solved with Weebly (like eliminating render-blocking resources, or reduce server response time), i'm trying to optimise everything else - so the page loading time is a huge part for this.

Having a smaller-size image as mobile background would help me doing this I'm quite comfortable in editing HTML/CSS as long as someone explains me how to do it - and as this page is the only splash page in my site, I think one possible solution would be to edit the theme code for splash pages.

Let me know if you can help! Thanks

[BJ5]

That kind of thing is possible, although a little tricky depending on what you intend to use as the background on mobile. If you just want to use a color or gradient then it's pretty easy. If you want to use another image it becomes a little more complicated because of positioning and size, etc.

[Albecess]

Hey @BJ 

for the mobile version I'd just use a color background - most likely white.
Can you suggest how should I go about doing it?

Thanks for your help!

[BJ5]

Something like this in header code field for that page on the Pages tab should do it on your live mobile site:

<style>
    @Media screen and (max-width: 767px)
    {
        body.sticky-nav-on .wsite-header-section
        {
            background-image: none !important;
            background: #fff !important;
        }
    }
</style>

[Albecess]

Hi @BJ ,

it worked, thanks so much for the help!

Now i'm wondering, if I wanted to put a picture there, how would I link it?

Like, where would I upload the picture, to get an URL/path to insert in the CSS code?

[BJ5]

It depends on if you've customized your theme, really. If you have not customized your theme, then upload your image by making a link on a hidden page and uploading it as a file. You can visit the hidden page to get the URL of the image after publishing, and then use that like this:

<style>
    @Media screen and (max-width: 767px)
    {
        body.sticky-nav-on .wsite-header-section
        {
            background-image: url('PUT_THE_URL_HERE') !important;
            background: #fff !important;
        }
    }
</style>

If you've already customized your theme, you can just upload it as a file to the theme and the url would be something like mysite.com/files/theme/myimage.jpg

[Albecess]

hi @BJ 

thansk you're being very helpful.

So if I upload the image on a page, hwo can I get the url of that image exactly and not the page itself? Publish the page, then go from the browser to find it?

Also, do you think I can use a similar code to do the same thing (turn the background to white, in mobile view), but only for certain sections?

ex. in my homepage at Medyca.it the second section (header excluded) is a nice landscape picture but on mobile it can't be viewed effectively, so i'm thinking of rendering it blank to decrease page loading time

[BJ5]

Yea, just visit the hidden page on your live site and right-click on your link to copy the url of the image file you uploaded. It's probably possible to do that for specific sections, provided the sections have unique IDs or class names.

[Albecess]

Hi @BJ 

So I could add a unique ID or class element to that section, using the embed code in the site editor, then go on the Theme tab, and add/edit code to define characteristics of that class/unique ID.

You think this could work?

Thanks again for your help

[BJ5]

You shouldn't need to add one yourself.. I'm not sure you could, anyway. I'm pretty sure Weebly gives each section a unique class or ID already, so it's just matter of looking at the code of a live page and seeing what they are.

[Albecess]

@BJ that's great, thanks once again for your help

[BJ5]

Hey, no prob