Title: Header Image Size / Cropping
Last modified: December 11, 2016

---

# Header Image Size / Cropping

 *  Resolved [dadislotroguides](https://wordpress.org/support/users/dadislotroguides/)
 * (@dadislotroguides)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/header-image-size-cropping/)
 * Hello,
 * I have tried using the Header Image and the Banner Image to get my site to display
   correctly, but in both cases the image I am using does not fit and gets cropped.
 * The image is 1920 x 600 as stated in the theme.
 * How do I get it to display the whole image as intended?
 * Here is a link to the site in progress: [http://flbplaygroundproject.com/](http://flbplaygroundproject.com/)

Viewing 10 replies - 1 through 10 (of 10 total)

 *  Thread Starter [dadislotroguides](https://wordpress.org/support/users/dadislotroguides/)
 * (@dadislotroguides)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/header-image-size-cropping/#post-8545349)
 * I have sent the email as requested. For some reason the image now has a grey 
   filter over it too.
 *  Theme Author [lyrathemes](https://wordpress.org/support/users/lyrathemes/)
 * (@lyrathemes)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/header-image-size-cropping/#post-8548193)
 * To remove the overlay – try this custom CSS:
 *     ```
       .frontpage-banner.frontpage-banner-parallax-bg:before {
           content: none;
       }
       ```
   
 * I’ve responded to you with a new parallax.min.js file that may help with the 
   banner.
 *  Thread Starter [dadislotroguides](https://wordpress.org/support/users/dadislotroguides/)
 * (@dadislotroguides)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/header-image-size-cropping/#post-8549591)
 * That worked to remove the grey filter.
 * However, the js file you sent has not resolved the header size image.
 *  Thread Starter [dadislotroguides](https://wordpress.org/support/users/dadislotroguides/)
 * (@dadislotroguides)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/header-image-size-cropping/#post-8562048)
 * I still cannot get the header/banner image to display correctly. No matter what
   size I upload it gets cut off. Very frustrating.
 *  Theme Author [lyrathemes](https://wordpress.org/support/users/lyrathemes/)
 * (@lyrathemes)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/header-image-size-cropping/#post-8570196)
 * I am sorry for the trouble you’re facing.
 * I looked into this in more detail. The issue has more to do with the way we’re
   using the image as a background along with this library [http://pixelcog.github.io/parallax.js/](http://pixelcog.github.io/parallax.js/)
   to create the parallax effect.
 * I would suggest you install a child theme and make the following modification.
 * The child theme can be a theme with an empty style.css and this functions.php:
 * [https://gist.github.com/lyrathemes/c83a7b7a3a1f0563e095b456c00045a0](https://gist.github.com/lyrathemes/c83a7b7a3a1f0563e095b456c00045a0)
 * Then add this file to the child theme.
 * **parts/frontpage-banner.php**
 *     ```
       <?php
       /**
       * The template part for displaying the banner for the front page (static)
       *
       * @package vega
       */
       ?>
   
       <!-- ========== Front Page - Image Banner ========== -->
       <?php global $vega_wp_defaults; ?>
       <?php 
       $vega_wp_frontpage_banner = vega_wp_get_option('vega_wp_frontpage_banner'); 
       $vega_wp_frontpage_banner_image = vega_wp_get_option('vega_wp_frontpage_banner_image');
   
       $vega_wp_frontpage_banner_heading = vega_wp_get_option('vega_wp_frontpage_banner_heading');
       $vega_wp_frontpage_banner_text = vega_wp_get_option('vega_wp_frontpage_banner_text');
   
       $header_image = get_header_image(); 
   
       if($vega_wp_frontpage_banner_image != '' || $header_image != '') { 
           #header image uploaded, no frontpage banner uploaded
           if($vega_wp_frontpage_banner_image == $vega_wp_defaults['vega_wp_frontpage_banner_image'] && $header_image != '') 
               $frontpage_banner = $header_image;
           else #header image uploaded, frontpage banner uploaded then removed
           if($vega_wp_frontpage_banner_image == '' && $header_image != '') 
               $frontpage_banner = $header_image;
           #no header image uploaded, no frontpage banner uploaded
           else if($header_image == '' && $vega_wp_frontpage_banner_image == $vega_wp_defaults['vega_wp_frontpage_banner_image'])
               $frontpage_banner = $vega_wp_frontpage_banner_image;
           #frontpage banner uploaded
           else if ($vega_wp_frontpage_banner_image != '')
               $frontpage_banner = $vega_wp_frontpage_banner_image;
   
   
       ?>
   
       <div class="image-banner frontpage-banner frontpage-banner-parallax-bg" style="background-repeat:no-repeat;background-image:url('<?php echo esc_url($frontpage_banner) ?>'); background-size:contain">
           <div class="container">
               <?php if( display_header_text() ) { ?>
               <div class="inner">
                   <h1 class="block-title wow zoomIn"><?php echo esc_html($vega_wp_frontpage_banner_heading) ?></h1>
                   <div class="text-center hidden-xs wow zoomIn description"><?php echo wp_kses_post($vega_wp_frontpage_banner_text) ?></div>
               </div><div class="helper"></div>
               <?php } else { ?>
   
               <?php } ?>
           </div>
       </div>
       <?php } ?>
       <!-- ========== /Front Page - Image Banner ========== -->
       ```
   
 * Let me know how it goes.
 *  Thread Starter [dadislotroguides](https://wordpress.org/support/users/dadislotroguides/)
 * (@dadislotroguides)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/header-image-size-cropping/#post-8570274)
 * I really have no experience with child themes. What exactly do I need to install,
   and how?
 * For now I have just replaced the frontpage-banner.php file in the theme and it
   is working well.
    -  This reply was modified 9 years, 4 months ago by [dadislotroguides](https://wordpress.org/support/users/dadislotroguides/).
 *  Theme Author [lyrathemes](https://wordpress.org/support/users/lyrathemes/)
 * (@lyrathemes)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/header-image-size-cropping/#post-8570660)
 * Download this zip file: [https://we.tl/V6bg7gJ1nH](https://we.tl/V6bg7gJ1nH)
   
   Go to Appearance > Themes > Add New. Upload and then activate it. Let me know
   how it goes.
 *  Thread Starter [dadislotroguides](https://wordpress.org/support/users/dadislotroguides/)
 * (@dadislotroguides)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/header-image-size-cropping/#post-8572567)
 * It works well, TY !
 * However, now the header and footer colours are now different.
 *  Theme Author [lyrathemes](https://wordpress.org/support/users/lyrathemes/)
 * (@lyrathemes)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/header-image-size-cropping/#post-8579548)
 * They are both exactly the same color: #5e9f00. You can try using the “inspect
   element” color picker to confirm.
 *  Thread Starter [dadislotroguides](https://wordpress.org/support/users/dadislotroguides/)
 * (@dadislotroguides)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/header-image-size-cropping/#post-8581007)
 * This is so odd, they are in fact the same today. Next time I will take a SS. 
   This has happened twice … the header was much darker.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Header Image Size / Cropping’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/vega/3.0.0/screenshot.jpg)
 * Vega
 * [Support Threads](https://wordpress.org/support/theme/vega/)
 * [Active Topics](https://wordpress.org/support/theme/vega/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/vega/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/vega/reviews/)

## Tags

 * [header](https://wordpress.org/support/topic-tag/header/)

 * 11 replies
 * 2 participants
 * Last reply from: [dadislotroguides](https://wordpress.org/support/users/dadislotroguides/)
 * Last activity: [9 years, 4 months ago](https://wordpress.org/support/topic/header-image-size-cropping/#post-8581007)
 * Status: resolved