Background Resizes Terribly on Mobile

[Kodaponics]

My site is kodaponics.com

We use a background to display a large image because the actual image drag-and-drop function is cannot display as big as we'd like. The resolution is not optimal, but it's even worse with the drag-and-drop image option. The problem is that on the mobile view, the image is cropped very small to where it's completey useless. We cannot use the hide app either since the background isn't an element that can be hidden by the plugin. My guess is that we'd have to do some html or css wizardry but I'm not at all familiar with that.

Any help would be greatly appreciated! Cheers.

[BJ5]

Try this in the Footer Code field for that page on the pages tab: 

<style>
    @Media screen and (max-width: 767px)
    {
        .wsite-background-2
        {
            background-size: contain !important;
            background-position: 0% 0% !important;
        }
    }
</style>

It should shrink the background image the published mobile site.

[Kodaponics]

Wow that helped a lot, but the image is still cropped a good bit. At least the image is centered! I may have pasted the code in the wrong place however because I could only go to the html/css code in the theme tab and I found no tab for the footer, just the header. I pasted the code under where it says "class=footer"

Thank you for the help!

[Bernadette3]

Hi @Kodaponics Click on Pages at the top of the screen, then click on the page name in the left side panel. Then click Seo Settings and you will see the footer section. 

[Kodaponics]

I see now, I put pasted the code into there but it does absolutley nothing now. The main body background image is still cropped about 50% of the left side.

[Kodaponics]

I edited the code to try and change the x position 50% to the right but changing the code does nothing either. 

[BJ5]

It seems like the class name of the section changed. I'm not sure if that changes every time when you publish, or if you deleted and re-added the section or made some other change. Try changing w-background-2 in that code to w-background-20

[Kodaponics]

Yeah, I checked the image with the inspect element function in google chrome and I saw that it was labeled differently. Even with the change to "20" it doesn't seem to do anything. I did some editing through the inspect element function and I like the results when I removed the "background size:cover" and the "background position" but I don't know how to recreate that within the weebly editor.

[BJ5]

Hmm... We could try a less specific class, although it will probably do it to every background image on the page. It's probably worth seeing how it looks, though - try using just ".wsite-background" without the number. I think that's the generic class used for the HTML element that has the background.

[Kodaponics]

It didn't seem to do anything either. I tried changing the position to "100% 100%" just to see if there would be a difference and it didn't change anything about the background. Could it be that the code is pasted in the wrong area, should I try putting it somewhere in the theme html/css code part?

[BJ5]

Is that with the same image that was on there earlier? When I turned off background:cover with web inspector (the rule is added more than once, so you have to turn it off a couple times), it stopped stretching it though could see from that change that the image wasn't big enough to fit natively.

[SimonWakeus]

@BJ @Kodaponics 

Any news on this? I am struggling with the same stuff and the code provided doesn't really change the appearance. 

Thanks!

Simon

[#13]

Yes, I was also wondering if this was resolved either.  I pasted this:

<style>
    @Media screen and (max-width: 767px)
    {
        .wsite-background-2
        {
            background-size: contain !important;
            background-position: 0% 0% !important;
        }
    }
</style>

In the footer and it doesn't seem to do anything.