Change global background image on just one page

Is there anyway to set a global background image that is unique to just one page.

All my pages share the same background image, with the exception of one. There are 2 regions, and one is modified to run full width, while the other is not. This makes it difficult to make a single region with the background image.
I assume there is someway to use css to create a custom background image for this one page that will span across all of the regions on this page. Any ideas ?

  • Kasia Swiderska

    Hello Christopher,

    Yes, you can do that with CSS placed in Global Theme CSS. It would look like that:

    .page-id-16 .upfront-output-bg-overlay > .upfront-bg-image {background-image: url(http://pathtoyourimage.png) !important;}

    where 16 is ID of page you want to have different background image.
    Normally I wouldn't suggest the use of the !important declaration. However, it can sometimes be a necessary evil when over-writing existing styles. You can find more info on the use of important declaration here:
    https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception

    Let me know if this is what you are looking for

    kind regards,
    Kasia

  • Christopher

    This worked perfectly, I got it wrong a few times but it worked.
    Thank you.
    I have one other question though.
    I need a slider as the background on one page, and im at a loss to do that as well.
    I have huge IT sliders plugin installed. I am curious if I can use some sort of link using something similar in css to create this, unless there is another way to lay out a slider on the background. I figured I could cheat a little on the workload and reference a Huge IT slider.
    This will have the same conditions, only one page gets it.

  • Nithin

    Hi Christopher,

    Hope you are doing good today. :slight_smile:

    What you can do is make use of the Widget element, and select the Text widget, and add the plugin shortcode in it.

    Other than that, I'm afraid there isn't any way to make use of a slider plugin as a background of a region/page.

    Have you tried to make use of the inbuilt Image Slider? Once you create a new region, you can click the green gear icon in order to show the region settings, and select Background Type > Image Slider, as shown in the given screenshot:

    This should help you in adding slider in your background. I hope this helps. Please let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.