Different bg image for each menu item

I am attempting to add a class to each menu item and then have a different background image load, instead of the same image for entire site.

I have removed "background: #fff url('../images/bg.jpg') no-repeat center top;" from template.css

I have added class1 to Menu Item > Menu Params > Additional Class

What code would I need to call class1 from the override .css file so that I can set different background for each menu item?

Thanks.

After some research I figured it out for anyone else looking to have multiple backgrounds:

Template Settings > Advanced Settings > CSS Override > Yes

Features > Suffixes >
Enter Menu Item ID for ItemID/Options and a css class name (example XXX) for Suffix.

Open override.css file and add code as necessary:

body.XXX {
background: #fff url('XXXX.jpg') no-repeat center top;
}

Just add one for each page and create a unique class name for each different bg you want.

Nice.

Hi

That's a very good explanation. I'll tag this thread so I'll be able to refer users with the same question to it.

#BACKGROUND