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
[ad_2]
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.