Archived topic

Different background image on each page

4 replies · Started by Tully on January 12, 2017

Viewing posts 1–5 of 5

January 12, 2017 at 5:17 pm #263564

Hi Tom, I'd like to have a different background image on each page, and be able to adjust the position, fixed or scroll, size etc?

January 12, 2017 at 5:52 pm #263565

Hi Tully,

Each page has a unique class in the <body> tag.

You would first need to find the page/post ID - it's actually hidden in your URL when you are logged in. Look for post= and that number is your page ID.

Then your CSS would be something like:

.page-id-1234 {
    background-image: url('URL TO THE IMAGE');
    background-position: center;
    background-attachment: fixed; /*default is scroll*/
    background-size: 80px 60px;
    background-repeat: no-repeat;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this makes sense.

January 12, 2017 at 6:07 pm #263567

You can also use a plugin to display your page ID.
https://wordpress.org/plugins/reveal-ids-for-wp-admin-25/

January 12, 2017 at 8:17 pm #263585

Thanks Leo, perfect!

January 12, 2017 at 8:56 pm #263596

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.