How to: Custom post/page backgrounds?

  • DesertSun

    (@desertsun)


    6 years ago

    I’ve been looking but can’t seem to find what I’m looking for. I would like to be able to add custom backgrounds to individual posts and pages behind the text. See example of this theme: https://www.elegantthemes.com/preview/DailyJournal/. It uses notebook paper. Is there a way to add images behind the text of a post or page either with plugin or with manual copy and paste code per post/page?

    I’ve found some plugins but they change the background of the whole page not where the text is.

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

    (@joyously)

    Each page on your site has class names added to the body tag that indicate the type of page and other status. One of those is the class postid-xx where xx is the ID. There is also page-id-xx for Pages.
    You can use these to style the background images you want to show.

    So for post 2, you could use something like
    .post-id-2 .entry-content { background-image: url(https://mysite/wp-content/uploads/myimage.jpg) no-repeat; }

    That would go in the Customizer > Additional CSS if you want to keep it with your theme. Or use a plugin for Custom CSS if you want it to remain regardless of theme switch.

    Thread Starter DesertSun

    (@desertsun)

    Thank you! You were close on the code, it was enough for me to research why it wasn’t quite working. There was a little missing code.

    ;
background-repeat:

    This needed to go between the last parenthesis and the no-repeat.

    It did put an image behind the text, but it doesn’t work quite like the example theme. The code needs something else to make it stretch to fit and the text goes edge to edge, there needs to be a margin too.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to: Custom post/page backgrounds?’ is closed to new replies.