Docs

[Spaulding.daniel]

I have managed to get a background image to work on the main menu and level 1 of the superfly menu. I am using this selector ( #sfm-sidebar ul.sfm-menu-level-2 ) to target level 2 of the menu, but when I try to add a background image with CSS, it’s not working. Do you know if this is possible or if I am using the correct selector?

[Prasant Rai]

Hello There,

Thanks for writing in!

Could you please provide us with your website URL so we can take a closer look?

Thanks.

[Spaulding.daniel]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.sfm-view.sfm-view-level-custom.sfm-modal {
    background-image: url(http://www.estrangedgraphix.me/wp-content/uploads/2017/02/fixed_02.png) !important;
    background-repeat: repeat;
    background-position: center center !important;
    background-size: contain !important;
}

Hope that helps.

[Spaulding.daniel]

That didn’t seem to work. I’ll add a screen shot of the area I want to add a background image to.

[Spaulding.daniel]

I’m sorry, I uploaded the wrong screen shot. This one shows an arrow of the section I am talking about.

[Nabeel A]

Hi again,

Please replace the previous code with the following code:

.superfly-on #sfm-sidebar .sfm-view-level-custom {
    background-image: url(http://www.estrangedgraphix.me/wp-content/uploads/2017/02/fixed_02.png) !important;
    background-repeat: repeat;
    background-position: center center !important;
    background-size: contain !important;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Spaulding.daniel]

Actually, I have a little hiccup. The image is showing up in places that I don’t want it to show up. How do I get rid of of the bg image on this section?

[Christopher]

Hi there,

Please remove this code:

.superfly-on #sfm-sidebar .sfm-view-level-custom {
    background-image: url(http://www.estrangedgraphix.me/wp-content/uploads/2017/02/fixed_03.png) !important;
    background-repeat: no-repeat;
    background-size: 275px 572px !important;
    background-position: 27% 123% !important;
}

And add this code:

.sfm-scroll-wrapper > div {
    background-image: url(http://www.estrangedgraphix.me/wp-content/uploads/2017/02/fixed_03.png) !important;
    background-repeat: no-repeat;
    background-size: 275px 572px !important;
    background-position: 27% 123% !important;
}

Hope it helps.

[Spaulding.daniel]

That just removed the background image from both sections. I cleared my cache to see if that was that problem, but no luck. I can’t seem to find the selector that targets level 2 of their menu.

.superfly-on #sfm-sidebar .sfm-view-level-custom {
background-image: url(http://www.estrangedgraphix.me/wp-content/uploads/2017/02/fixed_03.png) !important;
background-repeat: no-repeat;
background-size: 275px 572px !important;
background-position: 27% 123% !important;
}

This code is close to what I want, but it just adds a background image to sections I don’t want.

[Nabeel A]

Hi again,

Keep your previous code:

.superfly-on #sfm-sidebar .sfm-view-level-custom {
    background-image: url(http://www.estrangedgraphix.me/wp-content/uploads/2017/02/fixed_03.png) !important;
    background-repeat: no-repeat;
    background-size: 275px 572px !important;
    background-position: 27% 123% !important;
}

And add the following code as well:

#sfm-cc-20 {
    background: rgb(216, 80, 66) !important;
    height: 100% !important;
}

Let us know how this goes!

[Spaulding.daniel]

Perfect! This works great, thank you!

[Paul R]

You’re welcome! 🙂

[Author]

Posts