Different background image for every page

  • Author
    Posts
  • #101623

    stefnieto
    Member

    Hello, I saw there is a way to only have the background image to the front page, would like to know if there is a Css to change the background image on the other pages inside my website. Thanks.

    The blog I need help with is stefnieto.com.

    #101838

    thelukemcdonald
    Theme Author

    If you’re looking to change the background image on other pages, it’s best to pick a <body> class name that has a post or page ID so that it is unique to that page. For example, for this page, you might use this CSS selector.

    body.page-id-200 .obsidian-background-overlay {
      background-image: url("http://placehold.it/1400x1400");
    }

    Each page will have a unique ID you can use.

    #101903

    stefnieto
    Member

    Thank you so much! i really like this theme! it worked perfectly in every page except for the blog one…

    Also there is a way to include a call to action buttom with a link? or this theme doesnt support this. thanks

    #101907

    thelukemcdonald
    Theme Author

    The blog is an archive so it won’t have an unique ID, however, it will have a unique class name of “blog”. You can try the following for the blog page:

    body.blog .obsidian-background-overlay {
      background-image: url("http://placehold.it/1400x1400");
    }

    You can add a text link to the content area of any Post or Page. If you’re familiar with class names on elements, you can add a “button” class name to make it look like a button. Here is an example.

    <a class="button" href="http://example.com">Call to Action</a>

    That should give you a good start.

    #101916

    stefnieto
    Member

    Thank you so much! I really appreciate your answers… not very good with class names etc, but getting there. It worked perfectly. I have changed it for the meantime, but Im planning to make linked the blog with another page so it will open my Blog/website so I can arrange it in a better way to make it look nicer… how can I include the url link so when the client click the blog word it will take them to the page that is hosted in wordpress.com as well?

    Thanks

    #101934

    thelukemcdonald
    Theme Author

    Great, glad to hear that helped.

    I’m not sure I understand what you are looking to do with the blog link. If you can create a separate ticket for additional questions, that will be helpful and keep this ticket on topic.

    #101935

    stefnieto
    Member

    Thank you so much. I will.

    #101944

    thelukemcdonald
    Theme Author

    You’re welcome!

The topic ‘Different background image for every page’ is closed to new replies.