Hide Background Image When Using Elements

Hi there,

so background images are added using CSS, so we need some CSS to remove them.

1. Add this CSS to your site:

@media(max-width: 769px) {
    .hide-mobile-bg,
    .hide-mobile-bg:before {
        background-image: none !important;
    }
}

This creates a utility class of hide-mobile-bg

2. Select the Container Block with the background image, and in Advanced > Additional CSS Class(es) add: hide-mobile-bg

You may need to give you Container Blocks a background color for when the image is removed.

Hi David,

Many thanks for that answer.
I suspect you will have guessed that I have asked the wrong question.
Your answer does remove the background image and I have replaced the gap it leaves with a background colour.

However, The question I should have asked is, can I apply some code to this element which will prevent it displaying at all and which will close up the gap which removing the picture leaves?

Am I using the “wrong” code to add the background image and therefore when I want to have a much simpler top text and the hamburger navigation.

Not using WordPress and Generatepress for website construction I have used different header code and used media queries to change from the desktop to the mobile versions. I realise the “hide-on-desktop works the same way but I cannot figure out how to add that to the element.

Can the various options hide-on-mobile hide-on-tablet
And hide-on-desktop
Be applied the whole element?

Kind regards

Charles

This code applied in the elements section has done the job. I used the header option and entire site
and just wrote this html it could do with a few tweaks but I can easily fix that.

On the actual site I have then removed the background image on the mobile version and that then displays with a much smaller title and navigation.

<div class="hide-on-tablet hide-on-mobile">
    <div>
	<p style="font-size: 2em; color: white; padding-left: 33%; padding-top: 150px;">Aireborough Historical Society</p>
	<div>
		<a href="/contact/"><img src="https://aireboroughhistoricalsociety.org.uk/wp-content/uploads/2021/01/contact.png" /> </a>
	</div>
    </div>
</div>
	
<div class="hide-on-desktop hide-on-mobile">
    <div>
	<p style="font-size: 2em; color: yellow; padding-left: 33%; padding-top: 150px;">Aireborough Historical Society</p>
	<div>
	    <a href="/contact/"><img src="https://aireboroughhistoricalsociety.org.uk/wp-content/uploads/2021/01/contact.png" /> </a>
	</div>
    </div>
</div>
	
<div class="hide-on-desktop hide-on-tablet">
    <div>
        <p style="font-size: 2em; color: red; padding-left: 33%; padding-top: 150px;">Aireborough Historical Society</p>
	<div><a href="/contact/">
	    <img src="https://aireboroughhistoricalsociety.org.uk/wp-content/uploads/2021/01/contact.png" /> </a>
	</div>
    </div>
</div>

I have enclosed the answer in case it might help others. If it is not the "best" solution I would be happy to learn of a better one.

Sorry, I have not mastered how to add code in the forum. This .jpg shows the code https://aireboroughhistoricalsociety.org.uk/wp-content/uploads/2022/09/code-used.jpg

Glad to hear you found the answer, and yes that is the way i would go :)
If you're using the Block Elements ( or just the Block editor ) then you can select a block eg. a Container Block, which will provide you your outer <div>, and in Advanced > Additional CSS Class(es), add any of the hide-on-* classes to get the same result.