Menu Item Settings > Submenu > Background Image
Setting the background image for a submenu
You can assign an image to a submenu background via the Menu Item Settings.
1. Open the Menu Item Settings > Submenu tab
Hover over the item whose submenu you would like to apply the image to and click the Uber button that appears, then click the Submenu tab in the left column
2. Select your image
Scroll down to the Submenu Background Image setting and click the blue Select button
Upload a new image or select your image from the Media Library. Click the blue Select button to set your image.
The image will appear in the settings panel
3. Set Background Repeat
Decide if you want to make the background repeat as a pattern. Generally leave this set to No Repeat
4. Set Background Position
This can be set to any valid background-position CSS value. The most common would be
- bottom right
- bottom left
- bottom center
- top right
- top left
- top center
5. Set Background Size
Normally, you would leave this set to auto to display the image scaled to its proper proportions, but any valid background-size property can work. cover ensures the entire submenu is covered by the background image.
6. Submenu Padding
If you want to leave extra space for the image in the submenu, you can use padding to do so. The value here works just like the value for the CSS padding property – you can declare 4 values, top right bottom left.
7. Save your settings
Click the Save Menu Item button to save your settings.
Hide the background on mobile
If you would like to hide the background images below the mobile breakpoint, you can do so in the Control Panel > Main UberMenu Configuration > Images > Submenu Background Images > Hide Background Images on Mobile
