Background images not working

Hello @andrewlowry ,

Thank you for using MPG and please accept our apologies for the delayed reply!

Can you offer us more details as to how you are trying to implement the background images?

Are you using an external URL that randomizes images and serves one into the CSV file used in MPG? (if you place such an url in MPG I’m not sure if it will work)

Or are you using such an URL on the template page and when the MPG pages generate, they fail to execute that command?

If you could provide us with as much detail as you can so we can reproduce the issue, we’ll be more than happy in searching for a way to achieve your desired effect!

Thank you and we’ll await your response!

Mat

Thanks for getting back to me.

As I explained above, I’m using Elementor Pro and when attempting to use MPG for the section background image, the url is showing in the css as:

url(“https://www.mydomain.com/wp-content/uploads/{{mpg_main_banner}}”)

And thus the shortcode is failing to translate into the full image path.

The url above is what I’m using as the url for the background image in Elementor.

Each page has it’s own image that is uploaded into WP, so there is no randomisation.

When it is a ‘simple’ image on the page, the shortcode translates fine and the image displays.

Similarly, all text elements are working fine.

When I tried last week, I also used the custom css properties but that didn’t work either.

As far as you know, should the shortcodes work as background images with Elementor?

Thanks

Andrew

Hello @andrewlowry ,

Thank you for the details!

If I understood the problem correctly, then I’m afraid that this implementation wouldn’t work as you are trying to integrate MPG shortcode in the Elementor fields.

I supppose the {{mpg_main_banner}} code would contain the remaining path of the image from your media library, and you would expect Elementor to concatenate the first string “https://www.mydomain.com/wp-content/uploads/” with the image extracted from MPG. So an example of the expected behavior would be https://www.mydomain.com/wp-content/uploads/image1.jpg or something like that which would then be used by Elementor when generating the CSS.

In this case, I’m afraid that it will not work.

What you could try is to include in your CSV file a column called background or content (just an example) and parse in HTML for your page that would include an image as such.

However, instead of a list, you can use the HTML that you desire so when MPG parses the content, you will have the element exactly as you need it.

I am not entirely sure it would work within Elementor, but I think it is worth a try.

Thank you and please let us know if you have further questions!

Matt

Thanks for the reply.

I actually overcame this issue by using negative margins and z-index to get the desired visual effect.

I do have more questions but will leave those as separate issues.

Many thanks.

Andrew