Page BG image not showing - Backstretch or x theme bug? HELP!

Hi, the background image for the page is not showing on my site, it seems that the backstretch is not working.
I tested applying a background image one at a time, first through wordpress background image - that didn’t work. Next through cornerstone - that also didn’t work. The background pattern works.

I’ve applied a code that was adviced to add in to remove the white bg:
.site, .x-site {
background-color: transparent;
}

Even with that it also doesn’t work.

In wordpress:

In Cornerstone:

This is the backstretch code:

There is no backstretch div getting generated or css class. Just that Jquery declaration.

X Theme, Wordpress and all of my plugins are updated. What could be causing it?

Hi @redleome,

Thanks for reaching out.

There could be a plugin or custom code that affect your background image.

I recommend the following troubleshooting procedures before we investigate the settings.

  1. TESTING FOR THEME RELATED ISSUE
  2. TESTING FOR PLUGIN CONFLICT
  3. THEME UPDATE
  4. CHILD THEME
  5. CSS/JS CUSTOMIZATION
  6. VERSION COMPATIBILITY

Only if none of that helps, please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

Thank you I’ll give this a try.

Hi @redleome,

Please let us know how it works for you.

Thanks

  • X theme and Child themes are updated.
  • The background works when I directly added in the background via css code.
  • The background pattern on the xtheme works through cornerstone.
  • It’s just the bg image that is not working.

I checked the other X theme examples where they used full screen bg image, the problem that I’m seeing on the HTML code is that my page seems to not be creating a div tag with the backstretch css class when you add a bg image.

  • I removed all of the custom css code that we added in, and disabled all of the plugins - still not working. You’ll see on the screenshot that there is no generated div for the backstretch on the screenshot below.
  • I turned the background-color into transparent as well.

I appreciate you asking for a follow up @tristup. I found it a little frustrating that the answer I initially got was a generic one, I’ve went through the examples and the forum to find the answer before posting this question, it would actually be helpful if you could help me double check I might have missed something. I can just change the bg on the css code but the my team members needs to be able to change the background on their own through the GUI of cornerstone or wordpress because they don’t know css that well.

Hi @redleome,

Please give us the following information in a Secure Note so that we could examine your website.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

You’ll see that the homepage have a bg now - its only set through css. Let me know if you need some help going through the site, thank you for helping.

Hi @redleome,

I comment out your custom CSS for the body background image and set the background image in your X > Theme Options > Layout and Design > Background Pattern

When I inspect element, the background image in the theme option is just working.

Hope that helps.

Thank you.

thanks for the quick reply,
Yep, the bg pattern works as I’ve also mentioned on my previous post. The part that we need is the background image by page (not the global bg image), to show the image only on the homepage.

If you try to set the Background Image on a wordpress page it does not work.

If you try to set a bg image on the Layout and Design just to test it if the background image on the site would work - it also does not work. Sorry i really couldn’t figure out the cause of the error too…

Hello @redleome,

The background image is not working because your custom JS code is having a JS error and it is affecting the BackStretch JS script which is in charge of the background image. Kindly remove this JS first in X > Theme Options > JS and test your site again.

jQuery(function($) {
  var targetOffset = $(".page-toc aside.x-sidebar.left").offset().top;

  var $w = $(window).scroll(function(){
      if ( $w.scrollTop() > targetOffset - 30) {   
          console.log(targetOffset);
          $('.page-toc aside.x-sidebar.left').css({"position":"fixed"});
        	$('.page-toc aside.x-sidebar.left').css({"top": "50px"});
      } else {
        $('.page-toc aside.x-sidebar.left').css({"position":"initial"});
      }
  });
  
  var allPanels = $('.page-toc ul.ez-toc-list > li > ul').hide();
  		allPanels.parent().children('a').addClass("arrow-right");
  
  $('.page-toc ul.ez-toc-list > li > a').click(function() {
    	
    	allPanels.slideUp(); 
      $('.page-toc ul.ez-toc-list > li > a').css({'color' : '#7a7a7a'});
    	allPanels.parent().children('a').removeClass("arrow-down");
  		allPanels.parent().children('a').addClass("arrow-right");
      $(this).css({'color' : '#000'});
      
    if($(this).parent().children('ul').css('display') == 'none'){
      
      			$(this).removeClass("arrow-right");
    				$(this).addClass("arrow-down");	
     				allPanels.parent().css({'color' : '#000'});
            $(this).css({'color' : '#000'});
            $(this).parent().children('ul').slideDown();
    	}else{ 
        		$(this).removeClass("arrow-down");
        
    				$(this).addClass("arrow-right");
     	  		$(this).parent().children('ul').slideUp();
    	}
   /* return false;*/
  });
 
  
  
  
});

Kindly let us know how it goes.

So that’s what I missed, Thank you for helping!! it works perfectly now :slight_smile:

Hi @redleome,

Glad that we are able to help you.

Thanks

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