Support » Theme: raindrops » Header image starts cropped, then resizes

  • Resolved lightsabersetc



    First off, great work on the theme and thank you for providing it.

    I am using a header of the recommended size (950×198) on a fluid layout, but it is only showing the top 143 pixels (cropping out the bottom) until the page is finished loading. I took a look in the code and traced the issue to JS function raindrops_resizes(), which I am assuming is the helper function for header resizing on fluid layouts. I definitely don’t want to change anything there, so I was wondering if you had any ideas?

    The issue is located at if you would like to take a look.

    Thank you!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author nobita


    Hi lightsabersetc

    Please try below.

    Add functions.php first line(<?php before )

    function my_header_image(){
    <script type="text/javascript">
    		jQuery( '#header-image' ).css({'visibility':'visible'});
    add_action( 'wp_head', 'my_header_image' );

    Thank you.

    Hi nobita,

    Thank you for your reply. I added the code to the beginning of my functions.php file, but it had no effect.

    I think part of the issue here is the document.ready() function being deferred until after all of my images load. The header image seems to start as a cropped version, then the container is resized using JS once the page has loaded using raindrops_resizes().. the reason for the original cropping is completely eluding me though, particularly because only the height property of the image element is being manipulated.

    Below are the computer styles for the header while the page is loading:

    [Moderated. If necessary, please use pastebin.]

    Note how the height changes from 143px to 366.234375px

    Theme Author nobita


    Next Idea

    So what are try adding the height of the default in the header image?

    Add functions.php first line (<?PHP before ) below filter

    add_filter( 'raindrops_header_image_home_url', 'my_default_image_height' );
    function my_default_image_height( $html ){
    	return str_replace( 'id="', 'height="198" id="', $html );

    No good, I’m seeing the same issue. An interesting side effect here was that my nav bar expanded to 565px, leaving a lot of blank space below it. Also the footer bar disappeared, with the text being printed right below the nav.

    After looking, your test site at also experiences this issue. Best way to replicate is to open a private browser window and load the page. There will be a split second after the header image has loaded, but before the document.ready() fires, where the header will be cropped. I’ve been screwing around with this on my end too, but it’s been so long since I’ve worked in PHP that I’m pretty much just plunking around :/

    Theme Author nobita


    If you select a Responsive layout, I have contacted, a method of inhibiting, that the header image, due to the load of javascript, height changes, but you can not seem to satisfy.

    Operation of the header image such, really do not like, then it is possible to select a fixed page width.

    Please try switching to that of the fluid other than the page width from the theme options

    Unfortunately I do not have the option to use anything other than a fluid layout, so I will have to figure out a fix. As a temporary solution, I was able to stop the cropping with the below CSS
    #header-imager{ height:366px; }
    Although this is not ideal because the header starts big on mobile, then shrinks. I’ll drop a line back here when/if I am able to resolve this.

    Thanks for your help and theme!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Header image starts cropped, then resizes’ is closed to new replies.