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(' 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!
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/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!
Share Improve this question edited Feb 25, 2017 at 16:33 Ethan Rævan 4,0295 gold badges27 silver badges55 bronze badges asked Feb 25, 2017 at 16:05 SashaSasha 112 bronze badges 3 |1 Answer
Reset to default 1It 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/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;
}
!important? – Arsalan Mithani Commented Feb 25, 2017 at 22:08!importantin your background? – Arsalan Mithani Commented Feb 25, 2017 at 23:16