How to add different background image for each page

  • I’m using a twenty eleven child theme, and I’d like to add a unique background image for each of my pages. My site is here:

    https://martyrkanin.com/news/

    The look I’m going for is very similar to this:

    https://www.amoslee.com/tour/

    Note that there’s a unique static background image for each page. That’s what I want on my site, behind the text on the main part of the page (currently black).

    Do I need a unique template for each page, with its own image? I’ve been Googling but can’t find an example quite like what I need. If anyone has any pointers, I would much appreciate it.

Viewing 2 replies - 1 through 2 (of 2 total)

  • You can use a page-specific class from the body tag to target the CSS to a specific page – so for example, your “about” page body tag looks like:

    <body class="page page-id-9 page-template-default single-author singular two-column right-sidebar">

    So the CSS would be:

    body.page-id-9 {
   background-image: url("FILE PATH TO IMAGE");
}

    Thread Starter martyrkanin

    (@martyrkanin)

    Ooh, that’s way simpler than I was expecting it to be! Would these page-specific CSS elements all go in my child version of style.css?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to add different background image for each page’ is closed to new replies.