[Glen Pavelich]

I have a background image that seems to work well

for all but a few pages

, where it seems to repeat on the horizontal and I can’t figure out why it is doing this on only those pages. I don’t see any difference between those page set-ups and the ones where it works properly.

I have the background set up as:
.
Fit to Screen
Repeat
Scroll with page
(Full Screen doesn’t give me the ‘scroll’ option)and distorts the image.

For this and most pages it displays properly – see:
http://fireflywebs.ca/TestSite/weddings/
and
http://fireflywebs.ca/TestSite/tea-room/

But for some pages it doesn’t – see
http://fireflywebs.ca/TestSite/shop-attraction/
and
http://fireflywebs.ca/TestSite/our-events-and-shows/event-booking/

And they are different as to where the repeat happens on the page.
It seems to depend also on what size screen it is viewed on as they all look ok on my iPad.

Thanks

[Pratik]

@fireflywebs,

It seems to be some conflict with a plugin or so.

Try adding following code in Appearance=> Customize=> Additional CSS box:

body.custom-background {
    background-size: cover;
}

This should make issue go away on all pages.

Let me know how it goes.

Regards,
Pratik

[Glen Pavelich]

Unfortunately that simply distorts the background to become large and out of focus.

Is there any other possible fix?

[Glen Pavelich]

I’ve deactivated most all of the plug ins one by one and this didn’t make a difference to the repeating background on only those pages.
I also tried deleting and recreating those pages. This didn’t work.

Then I created a much wider background image 2000px wide, and that fixed it, except when viewed in responsive design for a very large screen.
With ‘Custom fill screen’ there is no ‘scroll with screen’ option…. otherwise that could be made to work.

I seemed to have fixed it thought with custom, repeat background image, scroll with page, using the wider version of the image. (except for large screens).
What is the optimal background image size?

G

[Pratik]

Hi @fireflywebs,

This is the way the background reacts by default. You will need to make some custom changes. You need to add two images and show small one on mobile screens and big one on desktop screens. You will need to hire a customizer for that.

Regards,
Pratik

[Glen Pavelich]

This requires some media queries correct?

[Pratik]

Hi @fireflywebs,

Yes, it will require media queries and image uploads. If you have idea about this, I can help you. Just upload your image in the server, then let me know the image path for smaller image, then I will provide you the code.

Regards,
Pratik

[Glen Pavelich]

Thanks. This is a test site for the time being. URL for the background is.
http://fireflywebs.ca/TestSite/wp-content/uploads/2018/01/StringBGButterflyWide-1.png

[Pratik]

HI Glen,

Also upload one for mobiles and give me that link too.

[Glen Pavelich]

I do apologize for taking so long. I got distracted by other projects on the go.
The mobile image is
http://fireflywebs.ca/TestSite/wp-content/uploads/2018/01/StringBGButterflyDevices.png
I set it at 950px wide, as I don’t know what the idea width for the device image should be.

[Pratik]

So, add following code to Appearance=> Customize=> Additional CSS box:

@media screen and (max-width: 950px) {
    body.custom-background {
        background: url( '//fireflywebs.ca/TestSite/wp-content/uploads/2018/01/StringBGButterflyDevices.png' );
    }
}

This will show http://fireflywebs.ca/TestSite/wp-content/uploads/2018/01/StringBGButterflyDevices.png for screens less than 950 px, smaller screens and default image that you uploaded in customizer for larger screens.

Let me know how it goes.

Regards,
Pratik

[Author]

Posts