Docs

[Eric M]

what is the css to place a background image behind the entire A) the footer widget area and B) main footer area?

[Eric M]

This reply has been marked as private.

[Nico]

Hi There,

Thanks for writing in.

You can check this link below on how to change footer backgrounds:

https://community.theme.co/forums/topic/footer-background-image/

Hope it helps.

Let us know how it goes.

Thanks.

[Eric M]

nope, put in exactly what was on that other post and still nothing. Its set up for bottom footer now but need for top too

[Friech]

Hi There,

Footers are two fold the top and bottom. To add a background image for the top you can add this under Custom > CSS in the Customizer.

.x-colophon.top {
	background-image: url('BACKGROUND IMAGE URL HERE');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

And this is for the bottom

html body .x-colophon.bottom {
	background-image: url('BACKGROUND IMAGE URL HERE') !important;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

Having them the same background image is a bit tricky. Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

After setting up a child theme navigate to \x-child\framework\views\integrity\ directory and create a file named wp-footer.php and paste the below in there.

<?php

// =============================================================================
// VIEWS/INTEGRITY/WP-FOOTER.PHP
// -----------------------------------------------------------------------------
// Footer output for Integrity.
// =============================================================================

?>
<div class="wholefooter">
  <?php x_get_view( 'global', '_header', 'widget-areas' ); ?>
  <?php x_get_view( 'global', '_footer', 'scroll-top' ); ?>
  <?php x_get_view( 'global', '_footer', 'widget-areas' ); ?>

  <?php if ( x_get_option( 'x_footer_bottom_display' ) == '1' ) : ?>

    <footer class="x-colophon bottom" role="contentinfo">
      <div class="x-container max width">

        <?php if ( x_get_option( 'x_footer_menu_display' ) == '1' ) : ?>
          <?php x_get_view( 'global', '_nav', 'footer' ); ?>
        <?php endif; ?>

        <?php if ( x_get_option( 'x_footer_social_display' ) == '1' ) : ?>
          <?php x_social_global(); ?>
        <?php endif; ?>

        <?php if ( x_get_option( 'x_footer_content_display' ) == '1' ) : ?>
          <div class="x-colophon-content">
            <?php echo do_shortcode( x_get_option( 'x_footer_content' ) ); ?>
          </div>
        <?php endif; ?>

      </div>
    </footer>
</div>
  <?php endif; ?>

<?php x_get_view( 'global', '_footer' ); ?>

Then add this under Custom > CSS in the Customizer.

.wholefooter {
	background-image: url('BACKGROUND IMAGE URL HERE');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.x-colophon.bottom, .x-colophon.top {
	background-color: transparent !important;
}

Also remove this on your Custom CSS as this code is causing an issue.

html body .x-colophon.bottom {
    background-image: url("http://enterprise.cobblemarketing.com/undefined")!important;
}

Hope it helps, Cheers!

[Eric M]

neither worked. whats next?

[Lely]

Hi Eric,

Upon checking, I found a CSS syntax error on the following custom CSS:

 html body .x-colophon.bottom {
	background-image: url('http://enterprise.cobblemarketing.com/wp-content/uploads/2016/02/grassfooter.jpg'') !important;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

There’s an extra closing single quote after the image URL. Please update above to this:

 html body .x-colophon.bottom {
	background-image: url('http://enterprise.cobblemarketing.com/wp-content/uploads/2016/02/grassfooter.jpg') !important;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

Do let us know how this goes.

Always,
X

[Eric M]

Didnt work

[John Ezra]

Hi Eric,

Thanks for updating the thread! Upon checking your site, the provided CSS is working fine. The reason you are not seeing it is because your selected image has a big whit area which is being shown. You can update the code to the following so we can move the image up and align from the bottom. Alternatively, you can use other images.

.x-colophon.top {
	background-image: url('http://enterprise.cobblemarketing.com/wp-content/uploads/2016/02/grassfooter.jpg')!important;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0% 100%;
}

.x-colophon.bottom {
	background-image: url('http://enterprise.cobblemarketing.com/wp-content/uploads/2016/02/grassfooter.jpg')!important;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0% 100%;
}

Note remember to remove the previous one as it is the background-position: center; that is causing the issue.

Alternatively, if you wanted to have one background span both the top and bottom footer I have JS and CSS workaround for you.

You will need to enclose both the footer.x-colophon.top and footer.x-colophon.bottom inside a div. The proper way to do this is to use a child theme and edit a few php files. But since you only need a background to span both footers (which isn’t possible as background images will always be contained in their container) you need to put another container around the two footers. We’ll use jQuery and CSS to achieve what you want.

First the CSS. Please remove your current CSS provided in the previous replies. You can then add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

/* Optional to negate your previous CSS if you didn't remove it */
footer.x-colophon {
    background:none!mportant;
}

html body .x-colophon.top {
	background:transparent!important;
}

html body .x-colophon.bottom {
	background:transparent!important;
}

/* Required for JS to work */
.footer-background {
	background-image: url('http://enterprise.cobblemarketing.com/wp-content/uploads/2016/02/grassfooter.jpg');
	background-repeat: no-repeat;
	background-size:cover;
    background-position: 0% 100%;
}

This should give an all white footer (they are actually transparent). You can then add this under Custom > Javascript in the Customizer.

jQuery( document ).ready(function( $ ) {
 	$('footer.x-colophon.top').each(function(){
    	$(this).next('footer.x-colophon.bottom').andSelf().wrapAll('<div class="footer-background"/>');
	});
});

There you have it! Hope this helps – thanks!

[Eric M]

not sure where the identical footer conversation started. It will be two different images.

[Eric M]

thank you

[Rue Nel]

You’re welcome!
We’re glad we were able to help you out.

[Author]

Posts