Having background display issues

hey. for some reason, the backgrounds are not consistently displaying on my pages. Can I get some help with this please?

example - https://intothemythica.com/homepage-enter-the-mythica/intro-to-the-mythica-angels-in-the-clay/

another example - https://intothemythica.com/homepage-enter-the-mythica/intro-to-the-mythica-hyperglyphs/

Hello Peter,

Thanks for writing in! Are you referring to the top portion of the page? It seems that the second page do not have a page title. You may have disabled the page title. Please edit that page and find the “Page Settings” meta box. You will need to enable the page title for that page.

To know more about Page Settings and how you can enable/disable the page title, please check this:

Please let us know how it goes.

No, what I meant was that the background image that I set in the Customizer has not been consistently showing up, and sometimes defaulting to white, which messes with my design and I’m wondering why

Hello Peter,

I have tested the pages several times. I could not replicate the issue.
Your background images displays as expected. You might be having some browsing cache issue in your browser.

Always clear your browser cache before testing the page again.

i appreciate that … yet, it’s still happening. it’s like the background loads, then it gets blanked out, inconsistently. i did clear the caches and all that. any ideas?

Hi Peter,

I can’t replicate the issue on my end, on all my browsers (Edge, IE11, Chrome, Firefox) the page’s background-image shows up.

With that said, I see a couple of issue on your background-image that might be the cause of an issue on your end. First, that image is too big in file size (1.6mb) and taking time to fully load, you can optimize that here and re-upload it.

Second, as you can see that image is requested via non-secure protocol (http://) even though your site has an SSL certificate (https:), please re-upload that image and reset the Theme Options > Layout and Design > Background Image

Hope it helps,
Cheers!

I changed it. It seems to be working properly for now. Used the TinyPNG thing thank you for that.

Question - Where did you see where it’s being requested and how do I force it to load on https if it’s not doing that already? (Once I learn how to check)

UPDATE QUESTION - Wondering … I want the image to be constant all through a potentially long post, stretching from header to footer. What is the minimum size? Right now the images I’m upload are around 3000 x 2000 or something like that and I’m just wondering how to make them smaller all around (plus my question above this paragraph)

Thank you so much.

Hi Peter,

I find that out using the Chrome browser Developer Toolbar, you’ll see that on the Elements tab when you inspect the page source-code, and the browser will also show you those warnings and errors on the Console tab.

You can follow the solution provided here to make sure all your images/resources loads via https

Actually, the 3000 x 2000 dimension is fine as long as you can keep it below 400kb (file size), try to compress your 3000 x 2000 image to TinyPNG and see if it can reduce the file size below 400kb, if not please resize your images to 1920 x 1080 or 1600 x 900.

How to Optimize Images for Web and Performance

Hope it helps,
Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.