Problem setting the location of the background image in the header page

This topic has 15 replies, 4 voices, and was last updated 2 years, 11 months ago by David.

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author

Posts
March 20, 2023 at 11:47 am #2574622

Patricia

Hello,
I added a blog in the main menu of a site I finished a few weeks ago and I’m trying to adjust the background image in relation to the text (I want the menu items to be aligned with the square counters)
I had done some testing beforehand and noted that I needed the value 65% center.
When I apply it now, the image moves on the preview of the element, but not on the online pages.
My first thought was that it was a cache problem. So I cleared all the caches (general cache, cache of each page individually and css cache) but it doesn’t change anything…
I made the site with the Java theme. I put you the address in private.
Thanks for your help
Patricia

March 20, 2023 at 12:11 pm #2574656

Ying
Staff
Customer Support

Hi Patricia,

it looks like the background position is set to45%center:
https://www.screencast.com/t/H8yFngnVGA

However, I don’t think this method will work as the image resizes itself when the viewport width changes.

March 20, 2023 at 12:26 pm #2574677

Patricia

Hello Ying,
I validated it again, but in my house it was on 65% already…

March 20, 2023 at 5:40 pm #2574831

Fernando
Customer Support

Hi Patricia,

This approach likely wouldn’t work as mentioned by Ying. The Background image resizes depending on the size of the screen. With that said, the position of the menu items won’t be on top of the boxes on all views.

The best approach to this would be to crop out an image for each box and add them as individual Backgrounds to each menu item.

March 20, 2023 at 11:58 pm #2575047

Patricia

Hi Fernando,
Why not ! Thank you for the idea.
Have a nice day

March 21, 2023 at 12:12 am #2575061

Fernando
Customer Support

You’re welcome, Patricia! Have a nice day as well!

March 21, 2023 at 1:49 am #2575179

Patricia

Argh, sorry Fernando..
I know how to replace the name of a page with a picture in the menu with Elementor, but not with Generatepress/Blocks 😔

March 21, 2023 at 5:45 am #2575463

David
Staff
Customer Support

Hi there,

do you want a different image behind each of the menu item names ?

March 21, 2023 at 5:55 am #2575476

Patricia

Hi David,
Yes, I’d like it so

March 21, 2023 at 9:48 am #2575891
Ying
Staff
Customer Support
You can try CSS like this, I listed the CSS for 1st, 2nd and 3rd menu items, and you can keep on adding it for 4th, 5th…
```
.main-navigation .main-nav >ul >li:nth-child(1) {
    background-image: url(the-image-url);
}
.main-navigation .main-nav >ul >li:nth-child(2) {
    background-image: url(the-image-url);
}
.main-navigation .main-nav >ul >li:nth-child(3) {
    background-image: url(the-image-url);
}
```
March 21, 2023 at 10:05 am #2575913

Patricia

Hello Ying,
I hope you are in good shape to face my crazy requests!
Thanks for your message… Unfortunately, it doesn’t work. I’m sorry, I’m making progress, but I’m not (yet 😅) a CSS pro!
I put it in the additional CSS.

March 21, 2023 at 10:38 am #2575961

Ying
Staff
Customer Support

No worries 🙂

Did you change the the-image-url to your image URL?

I put it in the additional CSS.

That’s correct, customizer > additional CSS!

March 22, 2023 at 1:58 am #2576488

Patricia

Hello Ying,
Yes I did, I copy you the CSS in private…

March 22, 2023 at 5:13 am #2576695
David
Staff
Customer Support
Ok, remove the CSS and add this temporarily:
```
@media(min-width: 1024px) {
    .main-navigation .main-nav >ul >li > a {
        position: relative;
    }
    
    .main-navigation .main-nav >ul >li a:before {
        --menu-image: url('https://wellcomeback.fr/wp-content/uploads/2023/03/pion-accueil.png');
        content: '';
        width: 100px;
        height: 100px;
        background-color: #f00;
        background-image: var(--menu-image);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        top: -25px;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
    }
}
```
What you should see on larger screens a red background behind each of the menu items that has a width and height of 100px. That many need adjusting for your needs.

Now you need an image that is that same size, and you add its URL in this line:

--menu-image: url('https://wellcomeback.fr/wp-content/uploads/2023/03/pion-accueil.png');

If you need a different image behind each menu item, then we can do that next 🙂
March 24, 2023 at 2:08 am #2579961

Patricia

Thank you very much David,
It’s a little bit impressive as a technique, but I will test very quickly… After thoroughly breathing and clear enough time to do so 😅
I’ll let you know
Have a good day
Author

Posts