Use custom field as body background image throughout site

This thread is resolved. Here is a description of the problem and solution.

Problem:

The issue here is that the user wanted to use custom backgrounds for their posts based on the custom field of the post.

Solution:

This would need some modifications in the theme field to load the background image itself.

You can use an inline style to achieve this.


style="background-image:url('<?php echo do_shortcode("[wpv-post-field id='.$id.' name='background-img' background-size='cover' size='full' url='true']")?>')"

Just ensure that it is using correct field name for the custom field and this should work for you.

So an example usage would be.


<body style="background-image:url('<?php echo do_shortcode("[wpv-post-field id='.$id.' name='background-img' background-size='cover' size='full' url='true']")?>')"> 


</body>

Where i'm applying the custom background around the body tag.

This support ticket is created 5 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	-
-	13:00 – 18:00	13:00 – 18:00	13:00 – 18:00	14:00 – 18:00	13:00 – 18:00	-

Supporter timezone: America/Jamaica (GMT-05:00)

Tagged: Setting up custom fields, Types plugin

This topic contains 17 replies, has 3 voices.

Last updated by sietseR 5 years, 9 months ago.

Assisted by: Shane.

1 2 →

Author

Posts

April 16, 2019 at 2:53 pm #1231637

sietseR

I've set up a custom field called "background-img" that has to be filled in for every post-type.
I want this image to show up as the full screen, fixed, covering background image for every page where it is submitted. So the content scrolls, the background doesn't.

I've already made a workaround by showing the image as a normal image and sending to the back by using z-index, but this is not a sustainable solution.

Example: hidden link

1. Is there a single way to do this without coding with PHP?
2. Or is there a way to do it for every template without coding with PHP?
3. Or is there a way with PHP coding, which you can explain step-by-step?

Thanks!

April 16, 2019 at 9:19 pm #1231884

Christian Cox

I've already made a workaround by showing the image as a normal image and sending to the back by using z-index, but this is not a sustainable solution.
Hi, can you explain more about what you want to improve, or how this could be more sustainable? I want to be sure I'm solving the right problem.

April 17, 2019 at 6:11 am #1231996

sietseR

I want to know how to assign the custom image field to the background image of the page (body). I've added a lot of custom CSS to make a fix now. I would like to do it properly.

I'm using Toolset Blocks now. Is there a way to add some code to a block to assign the background image?

April 17, 2019 at 6:54 pm #1232364

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hello,

As christian is currently unavailable I will be handling the tickets in his queue.

Take a look at the code below.

<div id="blocco-creatura" style="background-image:url('[wpv-post-field name='wpcf-layout-ricordo']');" />

This would be the correct way to do it. You will need to use inline styling to use a custom field as the background image.

Thanks,
Shane

April 17, 2019 at 7:10 pm #1232370

sietseR

Thanks for the reply!

I don't believe this works, because this is targeted at a 'div'. But I want to target 'body' with the custom field. How do I do that?

April 17, 2019 at 8:25 pm #1232426

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hello,

To do it for the body section you will definitely need to add it to the template file itself.

Will the background be dynamic and change based on the post being viewed?

Please let me know.
Thanks,
Shane

April 17, 2019 at 10:31 pm #1232490

sietseR

Yes, you're right. It should change with every post. How do I add it to the template with the right shortcode?

April 18, 2019 at 2:14 pm #1232833

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hello,

It should look something like this.

$id = get_the_ID();

<body style="background-image:url('<?php echo do_shortcode("[wpv-post-field id=".$id." name='wpcf-layout-ricordo']")?>')>

Please try this and let me know if this helps. If not please let me know and you can also provide access to the site so that I can help further with this.

The private fields will be enabled for your next response.

Thanks,
Shane

April 18, 2019 at 5:57 pm #1232982

sietseR

Alright, almost there. It's just that I've never added custom code to my site before...

I'm using Beaver Builder Theme. Where should I put this code and in what way?

April 18, 2019 at 7:50 pm #1233006

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hello,

Had no idea you were using a page builder.

This might be possible to do with the Beaver Builder plugin. There should be an option to set the background for Beaver Builder elements.

Could you check this and let me know ? I know for the Divi builders you are able to use our Toolset shortcodes to provide URL's for images.

Send me a screenshot of the option used to set a background image in Beaver Builder.

Thanks,
Shane

April 18, 2019 at 7:54 pm #1233007

sietseR

No, I'm using the Beaver Builder THEME. I'm actually using the Toolset Blocks with Gutenberg as a page builder and that works like a charm.

So how do I implement the code you provided?

April 18, 2019 at 8:19 pm #1233022

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hello,

Would you mind allowing me to have admin access to the site so that I can take a look?

It depends on how the theme itself is built .

Thanks,
Shane

April 18, 2019 at 8:20 pm #1233023

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

The private fields have been enabled.

April 18, 2019 at 8:20 pm #1233025

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

private fields

April 23, 2019 at 2:50 pm #1234485

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hello,

I've taken a look at your header.php file and you should be able to add the code like this.

$id = get_the_ID();

?>
<div class="fl-page" style="background-image:url('<?php echo do_shortcode("[wpv-post-field id=".$id." name='wpcf-layout-ricordo']")?>')" >

I made an attempt but the file wasn't saving. Could you try and let me know.

Thanks,
Shane

1 2 →