DIFFERENT HEADERS ON DIFFERENT PAGES

Home Pootlepress Academy Support Forums Academy Support Forum WordPress themes DIFFERENT HEADERS ON DIFFERENT PAGES

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #9181
    Randal Glover
    Participant

    Hi,

    I would like to put different headers on different pages on my site, with no title or description text showing.

    I have tried the CSS solution, below, which works but there are problems, as I will explain after this code.

    .page-id-50 #header {background: url(wp-content/uploads/2013/08/nat-peackock-090622-17-Version-2.jpg) no-repeat scroll 0 0 transparent; background-size: 100%;
    }

    .home #header {background: url(wp-content/uploads/2013/07/105-0504_IMG-Version-3-1.jpg) no-repeat scroll 0 0 transparent; background-size: 100%;
    }

    #logo {
    visibility: hidden;
    }

    Using this solution, when I reduce the width of the page, using an iPod or iPad, the space between the top and the bottom of the header image expands considerably instead of remaining constant.

    In order to display the header correctly in Chrome, on my desktop machine, I have set padding as 100px top and bottom, with a header margin of 20px top. Unfortunately, I believe this is causing the extra spacing, when I decrease the width of the page.

    If I remove the padding completely the image appears correctly for iPod width, but does not work at desktop (Chrome) width.

    Any suggestions for creating responsive headers for different pages?

    Thanks,

    Ry
    ——
    R. Y. Glover & Associates
    EDITORIAL AND MARKETING SERVICES
    1455 McTavish Road, North Saanich
    British Columbia, Canada, V8L 5T3
    Tel: 250-656-1227
    Fax: 250-656-1227
    Skype: ryglover
    Email: randalglover@shaw.ca
    Web: http://www.rygloverandassociates.com

Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.
Scroll to Top