Background images with PRO menu

[Lyser]

Hello,
I would like to know how to :

1. Adding a background image for all menu element (same image for each menu element)
2. Adding a background image for a single menu element (only one targeted menu element)
3. Adding another backgound image when the mouse hover the menu element
4. Adding another backgound image when the menu element has been clicked

[andreiv]

Hi Lyser,

1 If you want to add a singe background on the menu you can do it by setting a background for the section in wich your menu is.
](https://lh3.googleusercontent.com/sClrocu2KfJqC6mAMbjy_wSQAW0ZhzhMaQLOl2vDRdLTABsgr8nIhkfBAc6jOA4sqEfIio9j8tLdarajMczBkOQCnOaL17a0lVyF_8uxVANKrorBu1tXaarYAIlP4OO3WZ7ExTfF55UsD93n6TXeroILss3VrSSlGj6eGNiL6cZ5FIxEXpioq0VsvLnBQDXC9bPm_l_pw2RzP78rucpM7PoW7eU6oUcs7vq5OORBzenQl-pbuCAcI4_d2sXS9jzwkTtDD8i0lN3QUp3ttEEFEbRQrlI5rFHmB7EOYZjPAtfuv7XWHlrJuHXuro6rRSP3Pz0mIzTGXbc5JZFSgrUolCrs32jWWn9FPpfOf8JEbbUHA8JjaQIHG1aJXC3SgTWMzo7vN5hTyScXmiy53h8-VHvQey9JnfGYExsEKEsBC1pXUeJdyg7EyeZiRkvrGxhqwJuJJsIM0EE6EsWyZ58ftgxDtLj_fxJetXqa-TyHrSvqBlfIR-bA85DmSAI6Urbj8DWF2yx_SS0t8rBKEBMFnu6mhHCWfHbdT7bXzwoRiwMW3tscR2PylVt4WdU4EaOB0n9KPwzGQP5vniID6pc9UY3P6frfUB22WsnDazgSlR22yBA9nKdRjqTXXWverjf0LtLwWH8n_3AcBhPVdzYgMRIwkUhP3Q4=w1835-h767-no)

If you want to add one for every element the same background picture you can set a custom class for them and use css to display it.
](https://lh3.googleusercontent.com/TlkdJ1QUBuN0D_0qd7o1NkNHom60rq_SZcuUOGThBMSF1RjSb08Q7KLkqjSkQke5RKapdoEnQwPf7snly4DZytxUGLk8HPqIT-EFos3EWgAuCMuUoNT75U_iRIXdlj9fYhYcdTC0vKR3opFZ82MwUSlteXoNB2vlsLwSqTg1Hs9c68-yrhPGdpWo292RtyMO6BHZct10cMybqy5y2JApiu7Sb50fmdqFHRQwGyyflYdLr0hurRQTpQ3EUneOvs3TkTJKFJcDCAAkNGQZ4k2S0uKTWqP9vip6kxw8Qbl9Ok0AU7nl9TL_HWmrInatUOAfMRPcux5x4xJNJwfKCDozHvhRcablkiXCvakE446Gwu2H3WSQRGWLBsrX_EpdVieZk5CAU1Ja2W91B7WrtR-zJroyR6fy3EPk3rel1Ro_I3HK7Z69U86dfUF5XdLwh75UaUr61alc2lbocbUEtt2auXEG2-dbevyPreDET1RaFz4uDeIzUfiW_RE8RLuGAcqXP9LkURpiOnzvMoc7dTulZiwR6djuST6BCyo9fzh-4Z-rNVU7W9ZVrT4pGem2IBa73Txatj9olZYXo9qvbzTh7mRDesQMvuSg7OdAIgUzfXunw1uJO9Fg11P8lS_loaRBpNR3060UHW873tGaYHYQG3vbq6PBKJs=w734-h293-no)

This example will give you a great start. Css need’s to go in X > Theme Options > CSS

.test-class li {
    background-image: url('image.jpg');
}

2 For this you need to add a custom class to that specific menu element. You do this by going to Appearance > Menu and add a class to your menu. Here is a little video that you can follow.

After that just add your custom css. Here is an example of how you cand do this.

.custom-class {
    background-image: url('image.jpg');
}

3 and 4 All you have to do is to target the hover state and active state. Here is an example of that.

.custom-class:hover {
    background-image: url('image.jpg');
}
.custom-class:active {
    background-image: url('image.jpg');
}

[Lyser]

That’s perfect, thx andreiv ! =)

[andreiv]

You’re always welcome!
Happy to help. Cheers!