Different header image on each page

  • Author
    Posts
  • #133249

    Hi !
    I’d like to know if it is possible to change the header image depending on the page/post you are.
    This is a travel blog and I’d like to have a different header image representing each country and a different one on the main page…
    Thank you for your answer
    regards

    The blog I need help with is leskeretlaboussole.com.

    #133295

    ricardpriet
    Theme Author

    Hi there,
    thank you for writing and using our theme.

    About having different images in category pages, unfortunately this a feature that WordPress doesn’t have. But it can be made with CSS. Follow these steps.

    0. Firstly, paste this CSS in your custom CSS (This step only need to be made once) :

    .image-header-flexible a {
        display: block;
        position: relative;
    }
    .image-header-flexible a:before {
        content: '';
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        background-size: cover;
        background-position: center;
    }

    1. Upload the image you want to have in your custom page. Do that through Media > Add new.
    2. Copy the link generated:
    https://www.jezweb.info/wp-content/uploads/2014/04/05-Highlight-and-copy-the-File-URL.png
    3. Create your custom CSS code per each page or post:

    .postid-7268 .image-header-flexible a:before {
        background-image: url(https://leskeretlaboussole.files.wordpress.com/2018/07/pano_20180624_004732-1024x383-550516826-e1532767864600.jpg);
    }

    where:

    .postid-7268 is you post id and the link between “url(” and “) ” is your image url.
    Here you are how to find your post ID: https://en.support.wordpress.com/pages/#how-to-find-the-page-id

    4. Paste this CSS in your custom CSS code. Here you are how to do:
    https://en.support.wordpress.com/custom-design/editing-css/

    5. Repeat the process with any page or post you have (but skip the step 0)

    hope this helps :)
    Ricardo P. from SiloCreativo

The topic ‘Different header image on each page’ is closed to new replies.