obsidian them; different background images for individual pages?

  • Unknown's avatar
    moonstationburning · Member ·

    Greetings. I’m using the obsidian theme and would like a different background image for each page in my blog. I’ve tried using the following CSS customization, without success. Could someone tell me what I’m doing wrong?

    .archive.category-manifest .obsidian-background-overlay {
    background-image: url(‘https://moonstationburning.files.wordpress.com/2019/01/exploring-the-moon.jpg’);
    }

    The page in this example is https://moonstationburning.blog/manifest/; the slug is manifest; and I’m editing the CSS via the customize option next to the theme.

    Thank you!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    moonstationburning · Member ·

    *obsidian theme

  • Unknown's avatar
    torres126 · Member ·

    Hi there,

    The best way to accomplish this with CSS is to set it to each page individually. If it’s just the “Manifest” page you’re aiming to change the background of, here’s how to do that. 

    .page-id-99 .obsidian-background-overlay {
background-image: url("https://moonstationburning.files.wordpress.com/2019/01/exploring-the-moon.jpg")
}

    Let me know if that works for you. :)

  • Unknown's avatar
    moonstationburning · Member ·

    Works like a charm! Thank you so much.

  • Unknown's avatar
    torres126 · Member ·

    Glad to hear, happy to help! :)

  • Unknown's avatar
    moonstationburning · Member ·

    One more question, if you don’t mind:

    is there a way to code the individual page background image by using the page slug, rather than a numeric id; for instance, if I want the blog – with all posts – to have a certain special image, can I say something like:

    .page-id-blog .obsidian-background-overlay… etc.

  • Unknown's avatar
    torres126 · Member ·

    Sure thing! You can’t target a page by a slug, you need to use the page ID, but it’s pretty easy to find.

    1. Go to https://moonstationburning.blog/wp-admin/edit.php?post_type=page
    2. Edit the page
    3. Look at the post ID in the URL. For example, with the Manifest page, it’d be ?post=99. 99 is your ID, so you can use that as a selector

    For blog posts though, you don’t need to use an ID. For a lot of themes, the selector is just .blog, so you’d end up with something like this:

    .blog .obsidian-background-overlay {
background-image: url("https://moonstationburning.files.wordpress.com/2019/01/exploring-the-moon.jpg")
}

    For individual posts, it tends to just be .post, so you’d end up with something like this:

    .post .obsidian-background-overlay {
background-image: url("https://moonstationburning.files.wordpress.com/2019/01/exploring-the-moon.jpg")
}

    But I can’t confirm if that’s the case with the Obsidian theme without taking a closer look. If you’re wanting to make some more changes, would you mind please linking your blog page and/or the blog posts you’d like to change the background of, along with which pages exactly you’d like to switch the background?

  • The topic ‘obsidian them; different background images for individual pages?’ is closed to new replies.