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!

3
  • I was able to add different backgrounds for different pages using the WP Backgrounds Lite plug in. – Sasha Feb 25 '17 at 22:06
  • have you tried using !important? – Arsalan Mithani Feb 25 '17 at 22:08
  • what plugin is actually doing? check the page's css if it is putting !important in your background? – Arsalan Mithani Feb 25 '17 at 23:16
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;
}

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 Feb 25 '17 at 19:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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