A good way to add a different background image for each page?
-
16-10-2019 - |
Question
I'm working an a Thematic child theme wherein I need to have a unique image decorating each of the site's main pages, from a pre-defined set of permanent images. It would also be ideal to have one of these same images randomly selected to appear on all other pages.
Using a sidebar widget to load the images seems like a good option, but I don't know how to create my own widgets yet, and haven't had any luck finding a plugin which provides the simple functionality I'm looking for. I also don't want to clutter up the admin panel with plugins and options that the client shouldn't be fiddling with.
I think it will probably be most ideal to put something into my functions.php
which adds some generated markup to a Thematic hook based on the page ID, but I'm not quite sure what I'm doing, so I thought I should ask to see if someone already has a great solution.
Solution
Looking at their demo source, the easiest way to do this is by styling page classes like pageid-69
or slug-example-page
:
body.slug-example-page{
background: url(...);
}
If it has to be random image, add your styles in the header template so you can use PHP to generate dynamic css.