Adding different backgrounds for different pages

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;
}