Obsidian: Different or Random Images in Background possible?

  • Unknown's avatar
    ulrikejaegerfeld · Member ·

    Hi there.

    I would really like to change the background picture on each category of my blog ((email visible only to moderators and staff), theme: Obsidian). Is that possible via a css code or another advice?
    As an alternative:
    Can I upload some pictures wich appear by random?
    That would help, too.

    Thanks for your support.
    Best, Ulrike

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

  • dcoleonline · Staff ·

    Hi Ulrike,

    Yes, you can set specific background images for each category’s archive page, though they can’t be randomized.

    To add a new background, you’ll first need to get the category slug. The slug is the last bit of the URL which includes the category name. For example, the first category in your menu is GOLZDANILOV. If you click that link in the menu, you’re taken to this URL:

    https://golzdanilovblog.wordpress.com/category/golz-danilov/

    The slug, in this case, is:

    golz-danilov

    So you can use that in CSS like this to set the background for this specific category page:

    /* Custom Image on GOLZDANILOV Archive Page */

.archive.category-golz-danilov .obsidian-background-overlay {
    background-image: url("http://PUT-YOUR-IMAGE-URL-HERE");
}

    You may also want the background image set for the category’s archive page to display on your individual posts. This is possible, but it has to be done for each indivdual post.

    You’ll first need to find the ID of the post that you want to apply a background image to.

    When you edit a post, the URL of the edit screen will look something like this:

    https://wordpress.com/post/golzdanilovblog.wordpress.com/71

    The number at the very end is the ID. (It may be more than two numbers in some cases.)

    You can take that ID, and use it in CSS like this to set a background image for that post:

    /* Custom Image on Individual Post(s) */

.postid-71 .obsidian-background-overlay {
    background-image: url("http://PUT-YOUR-IMAGE-URL-HERE");
}

    So that would set an image on a specic post. If you have multiple posts in the same category, you can simply add additional post IDs to the existing CSS.

    So if you had a post ID of 72, you could apply the same image to 71 and 72 like this:

    /* Custom Image on Individual Post(s) */

.postid-71 .obsidian-background-overlay,
.postid-72 .obsidian-background-overlay {
    background-image: url("http://PUT-YOUR-IMAGE-URL-HERE");
}

    You can continue to do that for as many posts as you want to share the same background. You can even put the earlier reference to the category’s archive page first if you want to keep the code tidy:

    /* Custom Image for archive and indivudal posts */
.archive.category-golz-danilov .obsidian-background-overlay,
.postid-71 .obsidian-background-overlay,
.postid-72 .obsidian-background-overlay {
    background-image: url("http://PUT-YOUR-IMAGE-URL-HERE");
}

    You’ll replace http://PUT-YOUR-IMAGE-URL-HERE with your own image’s URL. You can find the URL by visiting your Media Library. Once you get there, click on an image and then click the blue Edit button. You’ll see its URL and a button you can use to copy the URL. when you have it copied, just paste it into your CSS as shown above.

  • Unknown's avatar
    ulrikejaegerfeld · Member ·

    Hello:)
    and thank you very much for your long answer. That sounds a bit complicated to me, but I will try with the help of a friend.
    THANKS again, have a nice day,
    Ulrike

  • Unknown's avatar
    ulrikejaegerfeld · Member ·

    Its done, great! Thanks a lot, love flying with wordpress:))

  • dcoleonline · Staff ·

    Hi ulrikejaegerfeld,

    I’m glad it worked!

  • Unknown's avatar
    ulrikejaegerfeld · Member ·

    Hi dcoleonline,

    it´s done, it worked well, thanks again!
    But now one last challenge: I habe a sub-navigation under “contact”: “imprint”. How can I post another different picture there?

    Best, Ulrike

  • dcoleonline · Staff ·

    Hi again!

    Sure, so the fact that it is a sub-navigation doesn’t change the process for you.

    The link there is https://golzdanilov.com/category/imprint/

    So you can use this to set your background image:

    /* Custom Image on Imprint Archive Page */

.archive.category-imprint .obsidian-background-overlay {
    background-image: url("http://PUT-YOUR-IMAGE-URL-HERE");
}

    Let me know if you run into any issues.

  • Unknown's avatar
    ulrikejaegerfeld · Member ·

    Great,
    thank you for your support:-))
    Have a nice evening!
    Best, Ulrike

  • The topic ‘Obsidian: Different or Random Images in Background possible?’ is closed to new replies.