Archived topic
Problem setting the location of the background image in the header page
15 replies · Started by Patricia on March 20, 2023
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
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.
Hello Ying,
I validated it again, but in my house it was on 65% already...
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.
Hi Fernando,
Why not ! Thank you for the idea.
Have a nice day
You're welcome, Patricia! Have a nice day as well!
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 😔
Hi there,
do you want a different image behind each of the menu item names ?
Hi David,
Yes, I'd like it so
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);
}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.
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!
Hello Ying,
Yes I did, I copy you the CSS in private...
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 :)
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
