1

I am attempting to add different background images for each page on my WordPress site. There are 5 pages and one page has three sub pages.

I am using the Enfold Theme, but I don't see an easy way to add full background images in the theme options.

I have the Simple Custom CSS plug in and have attempted to add a background image based on page ID: 

body.page-id-54
{
background-image:url('http://plusquotes.com/images/quotes-img/cool-pictures-  24.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
}

But this doesn't seem to work. How can I get a full screen background image on each page? Are there any plugins that would work? Thanks!

Improve this question
3
  • I was able to add different backgrounds for different pages using the WP Backgrounds Lite plug in.
    – Sasha
    Commented Feb 25, 2017 at 22:06
  • have you tried using !important?
    – Arsalan Mithani
    Commented Feb 25, 2017 at 22:08
  • what plugin is actually doing? check the page's css if it is putting !important in your background?
    – Arsalan Mithani
    Commented Feb 25, 2017 at 23:16

1 Answer 1

Reset to default
1

It would be helpful if you've said your CSS selector is whether not working or it's working but the image just doesn't appear. You also didn't clarify if your image should appear literally behind the entire page (header, content and footer) or just behind the content.

Anyway, Enfold adds a background-color property to almost every HTML tag, including <body>, <div id="main"> and <div id="av-layout-grid-1"> which means that in order for your image to appear you'd have to set the background-color property of some tag to transparent.

Try this and tell us whether it works for you or not:


body.page-id-54 #main {
    background-color: transparent;
    background-image: url('http://vignette1.wikia.nocookie.net/disney/images/f/fa/Captain-America-AOU-Render.png/revision/latest?cb=20150208173400');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment:fixed;
}

body.page-id-54 div#av-layout-grid-1 {
    background-color: transparent;
}
Improve this answer
1
  • I tried the code, but unfortunately just ended up with a bunch of code at the top of the page and no background image. After some more experimenting I was able to get part of the image to show up but it only showed up at the top of the page and not behind any elements on the page. body.page-id-54 { background-image:url('http://plusquotes.com/images/quotes- img/cool-pictures-24.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-color: transparent; }
    – Sasha
    Commented Feb 25, 2017 at 19:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.