Custom Background Image for About Me/ Contact Page

Hello! My website is http://gapyeargal.com/ . I want to keep my homepage and all blog posts with no background image and add a custom image to the About Me and Contact Page only.

I went into the CSS editor and used the code from https://colorlibsupport.com/t/different-image-on-homepage/ and https://colorlibsupport.com/t/how-to-change-background-on-specific-page/ , editing it for my pages to no avail.

Image URL: http://gapyeargal.com/wp-content/uploads/2017/02/globe-transparent.jpg

Thank you!

Hi @carolsmurth,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS


html body.page-id-14,
html body.page-id-12,
html body.page-id-12 .custom-background,
html body.page-id-14 .custom-background {
    background-image: url('http://gapyeargal.com/wp-content/uploads/2017/02/globe-transparent.jpg');
}

Best Regards,
Movin

Thank you for your response, unfortunately I am still having issues.

Single quotations still lead to a blank background. I used double quotation marks " " around the image link and the image appears zoomed in. When adding it as the background through the Customization option, it appears normal though.

html body.page-id-14,
html body.page-id-12,
html body.page-id-12 .custom-background,
html body.page-id-14 .custom-background {
    background-image: url("http://gapyeargal.com/wp-content/uploads/2017/02/globe-transparent.jpg");
}

The screenshots below show the differences in the image.

When I played around with Customize -> Background, I noticed the default causes the image to zoom in. Is there a custom code to emulate the “Fit to Screen” option?

To achieve this use the below CSS code instead of above shared code.

html body.page-id-14,
html body.page-id-12,
html body.page-id-12 .custom-background,
html body.page-id-14 .custom-background {
    background-image: url("http://gapyeargal.com/wp-content/uploads/2017/02/globe-transparent.jpg");
    background-size: contain;
}