[Theme: Make] Adding Different Background Images to Each Page

  • I want to add a full-screen background image to each page of my site, using either the Customizer or a plugin.

    I have tried adjusting the settings in the Customizer, but nothing seems to work.I have also installed Full Background Image Manager plugin but it does not seem to work.

    Please explain which settings to adjust or recommend a plugin that will work.

    The URL is https://www.corksandcleaver.com.

Viewing 2 replies - 1 through 2 (of 2 total)

  • First of all, I wish you wouldn’t use a plugin that disables the right-click. They make it very difficult and cumbersome for someone to examine a site and offer suggestions. I’m not sure why you installed it, but there’s always a way for someone to circumvent them.

    OK, in the Customizer, it looks like you’ve set the background to a wood background, but it’s not showing up because the header, body, and footer elements have background-color properties associated with them. To make your background image show through, add this rule to your custom CSS:

    .site-header-main,
.site-content,
#site-footer {
    background-color: transparent;
}

    If you want a different background image for each page, then all you need to do is use the page’s ID in your CSS. If you do a view source on your page (disable your Copy Protect plugin first), you’ll see the ID class in the body element. For example, the About page has a page ID of 4402, so to set the background-image for just that page to something different, add a rule like this:

    body.custom-background.page-id-4402 {
    background-image: url(https://corksandcleaver.com/wp-content/uploads/2015/09/Horizontal-Wood-3.jpg);
}

    Thread Starter chrishannon

    (@chrishannon)

    Crouchinbruin, thank you so much for this info!

    I had installed the right-click-disabling plugin to protect the images that will be used on this site. I had no idea that anyone would need the ability to right-click in order to help me, or I would have disabled it beforehand.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Theme: Make] Adding Different Background Images to Each Page’ is closed to new replies.