Cannot set background on body with astra

I am a developer with a solid understanding of html, css, js/ts and php. I have started learning WP in the last week and progress is very slow.

I am trying to set a background image on the body tag and I am using the astra theme and default block editor. I have no other plugins installed. There is a single index page and no other content. The background image meets WP requirements and is saved as local media.

Using the astra customisation panel to set the image (Globals>Colours>Site Background) the image does not show at all in dev tools. Using additional css the correct css does now appear in dev tools but the background image is overridden by a lot of other css rules set elsewhere. In order to show the background image I have to remove these rules in dev tools. I have no idea where they are being set, either by astra or somewhere else.

I have spent 3 hours trying to sort out an issue that should take 30 seconds. I feel like I am fighting WP at every step! Does anyone know how to set a global background image with the astra theme?

Thanks

Edit – I should also say that I am using a local dev environment using docker and WP 6.4.3

Edit 2 – I am able to do this with Kadence and twenty twentyfour themes so I believe it is an issue with Astra

1 Comment
  1. If the image is overridden and you’re not able to override it easily by targeting multiple parent elements, you could use !important as a last resort. That will override all previous styling rules.

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer