• Resolved royhart73

    (@royhart73)


    I am using twentig plug-in and the image background works great but I want to have more than just one. When I edit my homepage whatever I use carries over to the “About” page as well as the “Contact” page. On WordPress 5.7.2 and theme twenty twenty-one. Is there a way?
    Thanks

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Twentig

    (@twentig)

    Hi,

    The background image is a WordPress core feature, it’s not a feature added by Twentig. This feature lets you set a background image for the body of all the pages. Unfortunately, you can’t set a different image for a specific page.

    If you can share your website’s URL, maybe I can help you achieve it with custom CSS.

    Tom

    Thread Starter royhart73

    (@royhart73)

    Thanks a lot for replying. Doing a custom CSS sounds a little daunting. Are you aware of another plug-in that may be able to do it?

    Plugin Author Twentig

    (@twentig)

    I’ve browsed the plugin directory but haven’t found any plugin to do it. If you don’t have a lot of pages, adding custom CSS isn’t too complicated. Let me know if you are interested, and I can help you with the CSS.

    Thread Starter royhart73

    (@royhart73)

    Thanks for checking. I also did not see anything.
    I only have 3 pages, so far. I would just want 1 more image.
    https://www.w3schools.com/css/css3_backgrounds.asp
    https://www.w3schools.com/css/tryit.asp?filename=trycss3_background_full
    I found these with example code.
    Thanks!

    Plugin Author Twentig

    (@twentig)

    First, set a background image inside the Customizer that will be used for the whole site.

    To set a different background on a page, open the Customizer > Additional CSS panel and paste the following code:

    body.page-id-20 {
        background-image: url('https://domain.com/image.jpg');
    }

    Then in the code, replace the page id and the image URL with your own.

    You can find the page id when you edit the page, its id shows up in the address bar. See screenshot

    To get your image URL, upload your image in the Media library and on the right, click “Copy URL to clipboard”. See screenshot

    If you need to change the image for multiple pages, copy and paste the code as many times as needed:

    body.page-id-20 {
        background-image: url('https://domain.com/image.jpg');
    }
    
    body.page-id-21 {
        background-image: url('https://domain.com/image2.jpg');
    }
    
    body.page-id-22 {
        background-image: url('https://domain.com/image3.jpg');
    }

    Hope that helps.

    Thread Starter royhart73

    (@royhart73)

    It worked! Excellent instructions. Very much appreciated…..

    Plugin Author Twentig

    (@twentig)

    Glad it works.

    If you enjoy Twentig, please rate it. It would really help me out ??

    Thread Starter royhart73

    (@royhart73)

    Just did with 5 stars. Thanks again.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Multiple Image Backgrounds?’ is closed to new replies.