Changing Background Image via css or javascript

Hi there.

Site: https://fantasy-books.live
wordpress: 4.9.2
X Pro : 1.2.7

So, I’d like to change the background image of the site without going through x theme options.

I want to do that because I would like to change the background image if a class is used.

I have a dark theme. And as a button is pressed, a class is added and the css is used to change the color of the page, text, etc, and thus, enables the dark-theme.

So, I’d like to do that for the do that for the background image as well.

X Theme uses a javascript to lazyload the image. So, I’m not clear on the particulars on how I would change the background image without using the theme options.

Can you help?

Hi,

Regretfully what you are trying to achieve could only be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

Hello,

The custom development part, I already wrote that. It’s done.

It’s the part where I can change the background image using css or javascript and not the x theme options that I’m having issue with.

Can you look at it again with that perspective in mind?

Hi There,

Thank you for writing in! In that case please use a custom CSS instead for applying the background.

body {
	background-image: url(DEFAULT BACKGROUND IMAGE HERE);
}

body.dark-bg {
	background-image: url(DARK BACKGROUND IMAGE HERE);
}

Hope it helps,
Cheers!

Unfortunately, it doesn’t help me.

I intend to replace the image via css or javascript for the one in the x theme options.

Doing it your way, the image doesn’t lazyload and it’s overlayed by the image placed in the x theme options.

Hi there,

Yes, lazyload only works on <img> and not on background styling. While X theme options for background uses <img>, so lazyload will work just fine. It uses backstretch library ( http://www.jquery-backstretch.com/ ), perhaps you can use the sample library to implement your preferred background while having the lazyload.

Unfortunately, you can’t override theme’s options background image since it doesn’t through backstretch javascript library. Overriding it with javascript will not work too since the options are generated with PHP. This is the code responsible for that,


function x_customizer_output_js() {

  $x_custom_scripts                     = x_get_option( 'x_custom_scripts' );
  $entry_id                             = get_the_ID();
  $x_entry_bg_image_full                = get_post_meta( $entry_id, '_x_entry_bg_image_full', true );
  $x_entry_bg_image_full_fade           = get_post_meta( $entry_id, '_x_entry_bg_image_full_fade', true );
  $x_entry_bg_image_full_duration       = get_post_meta( $entry_id, '_x_entry_bg_image_full_duration', true );
  $x_design_bg_image_full               = x_get_option( 'x_design_bg_image_full' );
  $x_design_bg_image_full_fade          = x_get_option( 'x_design_bg_image_full_fade' );

  ?>

  <?php if ( $x_custom_scripts ) : ?>

    <script id="x-customizer-js">
      <?php echo $x_custom_scripts; ?>
    </script>

  <?php endif; ?>

  <?php if ( $x_entry_bg_image_full && is_singular() ) : ?>

    <?php
    $page_bg_images_output = '';
    $page_bg_images        = explode( ',', $x_entry_bg_image_full );
    foreach ( $page_bg_images as $page_bg_image ) {
      $page_bg_images_output .= '"' . $page_bg_image . '", ';
    }
    $page_bg_images_output = trim( $page_bg_images_output, ', ' );
    ?>

    <script>jQuery.backstretch([<?php echo $page_bg_images_output; ?>], {duration: <?php echo $x_entry_bg_image_full_duration; ?>, fade: <?php echo $x_entry_bg_image_full_fade; ?>});</script>

  <?php elseif ( $x_design_bg_image_full ) : ?>

    <script>jQuery.backstretch(['<?php echo x_make_protocol_relative( $x_design_bg_image_full ); ?>'], {fade: <?php echo $x_design_bg_image_full_fade; ?>});</script>

  <?php endif;

}

add_action( 'wp_footer', 'x_customizer_output_js', 9999, 0 );

You must do it the same way if you wish for lazyload works :slight_smile:

Thanks!

Hi there. Do you know where exactly I can find that piece of code in the X Pro folder?

You can find that in wp-content\themes\x\framework\functions\global\admin\customizer\output.php

1 Like

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