image background

@greghp Yes, that is the way to add the shortcode to a theme template.

As far as using the image as a background image, that isn’t an option and likely won’t be in the future. However, you may find this article helpful: https://css-tricks.com/on-object-fit-and-object-position/

thanks for your answer..

hum, difficult to understand your link and adds to your plugin.

another way ?

@greghp I’m not entirely sure what your specific use case is. Can you point me to a URL where things are breaking?

Hi Micah,

Yes thanks : https://sebastien-dev-rcconcept.pf2.wpserveur.net/

i would like used background image on footer, but image is on the top widget…

have a nice day

@greghp It looks like you’ve got some invalid HTML markup.

Take a look at #23 here: https://validator.w3.org/nu/?doc=https%3A%2F%2Fsebastien-dev-rcconcept.pf2.wpserveur.net%2Fen%2Fen-rc-concept%2F

The opening footer div doesn’t have a > symbol before the figure tag from the shortcode is output. This could be because the code to output the shortcode was placed in the opening tag for the footer.

Hi Micah,

you are very cool to help me!

this is the code footer and i’ll check this but it’s the same way..

<div id=”footer-outer” <?php echo do_shortcode(‘[mpress_image_refresh attachment=”5725, 5727″]’); ?> <?php echo ( $footer_reveal != ‘1’ ) ? ‘data-midnight=”light”‘ : ”; ?> data-cols=”<?php echo esc_attr( $footer_columns ); ?>” data-custom-color=”<?php echo esc_attr( $footer_custom_color ); ?>” data-disable-copyright=”<?php echo esc_attr( $disable_footer_copyright ); ?>” data-matching-section-color=”<?php echo esc_attr( $matching_footer_color ); ?>” data-copyright-line=”<?php echo esc_attr( $copyright_line ); ?>” data-using-bg-img=”<?php echo esc_attr( $using_footer_bg_img ); ?>” data-bg-img-overlay=”<?php echo esc_attr( $footer_bg_image_overlay ); ?>” data-full-width=”<?php echo esc_attr( $footer_full_width ); ?>” data-using-widget-area=”<?php echo esc_attr( $using_footer_widget_area ); ?>” <?php echo $footer_bg_image_markup; // WPCS: XSS ok. ?>>

<?php

get_template_part( ‘includes/partials/footer/call-to-action’ );
get_template_part( ‘includes/partials/footer/main-widgets’ );
get_template_part( ‘includes/partials/footer/copyright-bar’ );

?>

</div><!–/footer-outer–>

@greghp So here is what you should do:

1. Remove the <?php echo do_shortcode(‘[mpress_image_refresh attachment=”5725, 5727″]’); ?> code.
2. Move that line of code into one of the following locations:
– Before the <div id="footer-outer"
– Before the <?php tag containing the get_template_part references.

• This reply was modified 6 years ago by Micah Wood.
• This reply was modified 6 years ago by Micah Wood.
• This reply was modified 6 years ago by Micah Wood.

Hi Micah,

Like this : but it’s the same way..damn, i’m affraid it doesn’t works in fact, image is before footer..

<?php echo do_shortcode(‘[mpress_image_refresh attachment=”5725, 5727″]’); ?>
<div id=”footer-outer” <?php echo ( $footer_reveal != ‘1’ ) ? ‘data-midnight=”light”‘ : ”; ?> data-cols=”<?php echo esc_attr( $footer_columns ); ?>” data-custom-color=”<?php echo esc_attr( $footer_custom_color ); ?>” data-disable-copyright=”<?php echo esc_attr( $disable_footer_copyright ); ?>” data-matching-section-color=”<?php echo esc_attr( $matching_footer_color ); ?>” data-copyright-line=”<?php echo esc_attr( $copyright_line ); ?>” data-using-bg-img=”<?php echo esc_attr( $using_footer_bg_img ); ?>” data-bg-img-overlay=”<?php echo esc_attr( $footer_bg_image_overlay ); ?>” data-full-width=”<?php echo esc_attr( $footer_full_width ); ?>” data-using-widget-area=”<?php echo esc_attr( $using_footer_widget_area ); ?>” <?php echo $footer_bg_image_markup; // WPCS: XSS ok. ?>>

<?php

get_template_part( ‘includes/partials/footer/call-to-action’ );

get_template_part( ‘includes/partials/footer/main-widgets’ );

get_template_part( ‘includes/partials/footer/copyright-bar’ );

?>

</div><!–/footer-outer–>

<?php

get_template_part( ‘includes/partials/footer/off-canvas-navigation’ );

?>

@greghp

I’m assuming you want to show the image full-width at the top of the footer?

Move the shortcode down so it is right before the <?php get_template_part... code.

Add a class attribute to the shortcode, like so: [mpress_image_refresh attachment=”5725, 5727″ class="footer-image"]

In your CSS, add these rules:

`
#footer-outer figure {
margin: 0;
}

.footer-image {
width: 100%;
margin: 0 0 -8px 0;
}
`

Hi micah,

difficult to explain! i’ll try to have an image background with your plugin on footer like this :

https://sebastien-dev-rcconcept.pf2.wpserveur.net/wp-content/uploads/2019/03/Sans-titre-1.jpg

really thanks!

@greghp

Ah, then you’ll need to place this just inside the <div id="footer-widgets"> tag (which is probably located in the includes/partials/footer/main-widgets.php file):

<?php echo do_shortcode('[mpress_image_refresh attachment=”5725, 5727″ class="footer-image"]'); ?>

Then add this to your Additional CSS section in the theme customizer (or your theme’s style.css file):

#footer-widgets { position: relative; }
#footer-widgets figure { margin: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#footer widgets .widget { background: #000; padding: 1em; }
.footer-image { width: 100%; height: 100%; object-fit: cover; }

That should make it look like what you want.

Damn, no way is it the same things…

sorry for your patience and your fast answer!

maybee your plugin have the features “background image” a one day or last update!!

very thanks for your time to help me!!!

have a nice day