Wordpress: Header image moves when stretching the browser

Discussion in 'CSS' started by drew68, Jun 3, 2014.

  1. #1
    the big header image at the top (2200x383) moves on all the subpages, but stays put on the home page…when you stretch the browser.

    any idea who i can get all the other pages to act the same way as the home page?

    http://johalswarn.wp.hobbsherder.com/
     
    drew68, Jun 3, 2014 IP
  2. BenBlurr

    BenBlurr Greenhorn

    Messages:
    37
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #2
    Hi,

    The problem with your sub-pages is that you try to load the background images via the HTML while the homepage loads the images via the CSS.
    What I would suggest is to add another class to the <div calss="HH-header"> on subpages, something like: <div calss="HH-header HH-header-sub">
    It is very important that the homepage does NOT have the the HH-header-sub class.
    Once all subpages have that class, you can load the image for the sub-pages via the CSS, don't forget to use !important, so your CSS will look something like this:

    .HH-header:after {
    background-image:url('images/header1.jpg');
    }

    .HH-header-sub:after {
    background-image:url('images/sub-background.jpg');
    }
     
    BenBlurr, Jun 4, 2014 IP
  3. drew68

    drew68 Well-Known Member

    Messages:
    582
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    128
    #3
    ok i'll try this but there is only one header.php file for all the pages…this is a WP site.
     
    drew68, Jun 4, 2014 IP
  4. drew68

    drew68 Well-Known Member

    Messages:
    582
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    128
    #4
    hmmm not working
     
    drew68, Jun 4, 2014 IP
  5. drew68

    drew68 Well-Known Member

    Messages:
    582
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    128
    #5
    fixed it! i just placed this before the closing </head> tag…

    <style type="text/css">
    .hh-header:after{
    background-image:url("<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->
    ID) ) ?>");
    }
    </style>
    <?php } ?>
     
    drew68, Jun 4, 2014 IP
  6. BenBlurr

    BenBlurr Greenhorn

    Messages:
    37
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #6
    Oke thats great! :)
     
    BenBlurr, Jun 11, 2014 IP