Custom CSS for under menu



I am trying to put an image on the half of the background under the menu. I use this custom css;

.page-id-xxx  {
    background-image: url('');
    background-repeat: no-repeat;
    background-size: 50% 100%;

and xxx is my page id. So it will show up on the right page. But when I insert it like this it will come at the bottom. if I add #masthead after my page-id it will come in the header (behind the menu). But I want it to be under the menu, how is it called. What section is it?

I want it to be on the left side (half of page) in the light blue, please check out this link so you know what i am talking about. Do you guys know how to fix that?

If it is both under the menu and in the rest of the blue on the left its also good (even better).

Kind regards,


Hello, I’m not sure what exactly you want to achieve.

Can you please provide some explanatory screenshots?

Kind Regards, Roman.


Hi Roman,
Thanks for your reply. I want it to look like this

So I want the image on the back of the menu & body (not the footer area).
Is that possible with a custom css? If it is just in the body its good as well, but hopefully this is possible.
Hope to hear from you.

Kind regards,


Hello Ramon, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

.page-id-264 #content .elementor-background-overlay {
    background-image: url('');
    background-repeat: no-repeat;
    background-size: 50vw 34vw;
    background-color: #3da5b8;
    opacity: 1;

But please note that it will not look good on small screens.

Kind Regards, Roman.