[Support request] Want to add different background photos for mobile and desktop posts

Hi there,

you could try this.

1. Create a new Hook element
https://docs.generatepress.com/article/hooks-element-overview/

Add this code to the hook content:

<?php
$desktopBackground  = get_post_meta( get_the_ID(), 'desktop_background', true );
$mobileBackground  = get_post_meta( get_the_ID(), 'mobile_background', true );

if ( $desktopBackground ) {
  echo '<style> 
	body {
	background-image: url(' . $desktopBackground . ');
	background-size: cover;
	}
	</style>';
}
if ( $mobileBackground ) {
  echo '<style> 
	@media(max-width: 768px) {
	body {
	background-image: url(' . $mobileBackground . ');
	background-size: cover;
	}
	}
	</style>';
}
?>

Select the WP_head hook
Check Execute PHP
Set Display Rules to Entire Site.

2. Edit your Post and create 2 x Custom Fields:

https://wordpress.org/support/article/custom-fields/

You may need to enable them in the Post editor by clicking the 3 dot menu > Options > Advanced panels.

Your 2 fields should be named:

desktop_background
mobile_background

For each of the fields values you will need to add the full URL to the image you want to add.

If this works, then you can simply select those fields in each post ( you don’t need to add new – they will be in the list ) and update the URLs.

In the Custom Fields panel you will see a link labelled Enter New this will clear the field above it where you add your field name. Once the field name is entered, click Add Custom Field

Can you link me to a screen shot of your Hook Element ?

Thats not the same code i provided here:

https://generatepress.com/forums/topic/want-to-add-different-background-photos-for-mobile-and-desktop-posts/#post-1489966

Make sure it is that exact code, the wp_head hook is selected and the Execute PHP is enabled. Then the custom fields will work.

Hmmm… did it show any error?

Well thats weird.
Maybe another function is interfering. Lets try a different approach.
Delete the Hook Element and remove the custom fields ( by disabling them in the 3 dot > options )

The add this to the Simple CSS meta box in the post editor:

body {
    background-image: url(your_destkop_image_url);
    background-size: cover;
}

@media(max-width: 768px) {
    body {
        background-image: url(your_mobile_image_url);
    }
}

Add the two URLs.
You will need to copy and paste and update the urls for each post.

So the article background?

If so change body { for .separate-containers .inside-article { in the CSS