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.

Thanks for the quick reply. I put the code but heading to my custom fields I don't have the option for desktop_background and mobile_background. How do I add them?

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

Thanks again. I added the code to the hook as well as put in the custom fields.
At this moment it just has some text at the top of the page.
https://www.whereiskylemiller.com/ski-touring-in-mount-rainier/

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.

Put in this code and it crashed the site.
<?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('https://www.whereiskylemiller.com/wp-content/uploads/2020/10/IMG_0072_kyle-at-top-of-skin-track_4x5.jpg');
background-size: cover;
}
</style>';
}
if ( $mobileBackground ) {
echo '<style>
@media(max-width: 768px) {
body {
background-image: url('https://www.whereiskylemiller.com/wp-content/uploads/2020/10/Gallery-for-Mount-Rainier-snowboarding-in-the-backcountry-10.jpg');
background-size: cover;
}
}
</style>';
}
?>
wp-admin/post.php?post=14766 this is my post ID for the site.

Sorry for so many questions.

Hmmm... did it show any error?

Sorry that I am asking so many questions.
I posted the file above as seen into the hook
then added this to my Page custom fields

then when I went to see the page online I received this 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.

Well it seemed to work in the far background but I'm looking to put it in the post and have it fixed. I'm hoping to have it between the photo and the text. I originally tired to do it with Generate blocks but the photo never showed up. I think that is an issue with AMP.
This is what it looks like right now and would like the far background to still be black. Once again I really appreciate your support.
https://www.whereiskylemiller.com/ski-touring-in-mount-rainier/

So the article background?

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

While it worked I think now it is a blown out photo filling the whole post. I'd like the photo to be fixed within the page and stay still while scrolling down.