Title: Increase Header Background Image Height
Last modified: August 21, 2016

---

# Increase Header Background Image Height

 *  [Katelynbshp](https://wordpress.org/support/users/katelynbshp/)
 * (@katelynbshp)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/increase-header-background-image-height/)
 * HI,
 * Here is the link to my site. [http://hotmomseries.com/](http://hotmomseries.com/)
   
   I have a nice header image seleceted which is being cropped and I can’t seem 
   to find where I can edit the height to be taller than the default.
 * Can someone please assist me with this? I looked at old forum posts but they 
   seem to be for a different version of the Book Lite Theme because they all mention
   customheader.php which doesn’t exists in my php files.
 * Thank you!

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

 *  [Kye](https://wordpress.org/support/users/gmax21/)
 * (@gmax21)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/increase-header-background-image-height/#post-5076337)
 * Hey there.
 * When you say the image height, are we talking about the actual image or the space
   where the image is placed?
 * I think it’s the area where the image is placed and if that’s the case then maybe
   some CSS like this:
 *     ```
       .site-header-main {
       height: 565px;
       }
       ```
   
 * There is a chance that the theme has a CSS field in the options, if not then 
   you can make a child theme:
 * [http://codex.wordpress.org/Child_Themes](http://codex.wordpress.org/Child_Themes)
   
   [http://premium.wpmudev.org/blog/create-wordpress-child-theme/](http://premium.wpmudev.org/blog/create-wordpress-child-theme/)
 * Or you can instead use a plugin if you like:
 * [http://wordpress.org/plugins/custom-css-manager-plugin/screenshots/](http://wordpress.org/plugins/custom-css-manager-plugin/screenshots/)
 * [http://wordpress.org/plugins/my-custom-css/screenshots/](http://wordpress.org/plugins/my-custom-css/screenshots/)
 * [http://wordpress.org/plugins/pc-custom-css/](http://wordpress.org/plugins/pc-custom-css/)
 * [http://wordpress.org/plugins/imporved-simpler-css/screenshots/](http://wordpress.org/plugins/imporved-simpler-css/screenshots/)
 * Hope this helps 🙂
 * Have a fantastic day! 🙂
 *  [LivingtheGourmet](https://wordpress.org/support/users/livingthegourmet/)
 * (@livingthegourmet)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/increase-header-background-image-height/#post-5076381)
 * Hi I am having issues with my header as well. Every time I upload an image, WP
   has me crop it to their default 400×170 px. This is making my headers appear 
   really tiny. As Katelynbshp pointed out, all the older threads on enlarging header
   image are for themes that are outdated.
 * Thank you!
 *  Thread Starter [Katelynbshp](https://wordpress.org/support/users/katelynbshp/)
 * (@katelynbshp)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/increase-header-background-image-height/#post-5076453)
 * thnak you I was able to make the space where the image is placed have a larger
   height, however I notice when I try the site on my iphone, the image is not responsive.
   it is very large- it doesnt resize to fit and iphone screen. I have it selected
   as ‘cover’ in the header image properties in the customize area- shouldn’t this
   make the image responsive?
 * Can you please let me know how this can be fixed?
 *  [Kye](https://wordpress.org/support/users/gmax21/)
 * (@gmax21)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/increase-header-background-image-height/#post-5076462)
 * Hey there,
 * Well setting a fixed height removes the responsiveness. But you can target this
   with media queries. As an example you could do something like:
 *     ```
       @media (min-width: 300px) and (max-width: 800px)  {
       	.site-header-main {
       		height: 50px !important;
       	}
       }
       ```
   
 * That means when the browser is between 300px and 800px then the height of that
   class will be 50px.
 * Chris Coyier is an awesome guy to follow on CSS stuff, he wrote a couple of articles
   here which should help you:
 * [http://css-tricks.com/logic-in-media-queries/](http://css-tricks.com/logic-in-media-queries/)
   
   [http://css-tricks.com/snippets/css/media-queries-for-standard-devices/](http://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
 * Hope this helps 🙂
 *  Thread Starter [Katelynbshp](https://wordpress.org/support/users/katelynbshp/)
 * (@katelynbshp)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/increase-header-background-image-height/#post-5076464)
 * But can I get it to resize proportionally? Not just crop? I stll want the full
   image height to show, but because screen size is smaller, I want it to resize
   the image to fit, instead of just cropping it to show only 50px…that will cut
   off the title and faces on the image and isn’t ideal.
 * Thanks,
 *  [Kye](https://wordpress.org/support/users/gmax21/)
 * (@gmax21)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/increase-header-background-image-height/#post-5076469)
 * Did you try it?
 * The image isn’t fixed, here’s a screenshot:
 * [http://monosnap.com/image/5iMNMVmZx0maotOu4unc6kwHVVKwhq](http://monosnap.com/image/5iMNMVmZx0maotOu4unc6kwHVVKwhq)
 * That’s resized at 120px. The full image size is still there, we’re simply resizing
   the header space for a smaller browser and leave that to resize the actual image.
 * Some other resources for you:
 * [http://premium.wpmudev.org/blog/diy-truly-responsive-images-on-your-wordpress-website/](http://premium.wpmudev.org/blog/diy-truly-responsive-images-on-your-wordpress-website/)
   
   [http://www.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/](http://www.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/)
 * You could also use CSS to provide a smaller more optimised image for the smaller
   browsers. For example:
 * [http://responsiveimages.org/](http://responsiveimages.org/)
    [http://css-tricks.com/which-responsive-images-solution-should-you-use/](http://css-tricks.com/which-responsive-images-solution-should-you-use/)
 * Hopefully this should help and get you on the way to what you need. 🙂
 *  Thread Starter [Katelynbshp](https://wordpress.org/support/users/katelynbshp/)
 * (@katelynbshp)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/increase-header-background-image-height/#post-5076524)
 * On my iphone it doesn’t look like that, it’s very cropped and the image is still
   large, it’s doesn’t resize.
 * I tried adding the code as you suggested however it just bugged the menu and 
   didn’t make the image size smaller. Where specifically should I add it? There
   is already media screen coding so maybe it’s conflicting.
 * Still need a bit more help. thank you
 *  Thread Starter [Katelynbshp](https://wordpress.org/support/users/katelynbshp/)
 * (@katelynbshp)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/increase-header-background-image-height/#post-5076606)
 * Hi Sorry but my issue has still not been resolved.
 * I tried editing the media queries as per the links you provided but changing 
   the minimum width size does not affect it on my smartphone at all.
 * Here’s the link to a screenshot of what it looks like on my iphone5 [http://grab.by/yLhg](http://grab.by/yLhg)
   The image is still large (not proportionally resized) and the menu is cut off
   and doesn’t work when clicked.
 * I’d just like a simple step by step as to how I can fix the image size.
 * Thank you very much!
 *  [Kye](https://wordpress.org/support/users/gmax21/)
 * (@gmax21)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/increase-header-background-image-height/#post-5076618)
 * Hey there.
 * I took a look at your site and I’m not seeing the code I suggested up there. 
   Where did you add it?
 * If I used developer tools through the iPhone to test that code and it worked 
   fine.
 * You can use those media queries to target different screen resolutions. You can
   alter the height so that it fits more, or you could use a different smaller image.
   This can be done through the [@media](https://wordpress.org/support/users/media/).
 * Take care.

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

The topic ‘Increase Header Background Image Height’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/book-lite/114/screenshot.png)
 * Book Lite
 * [Support Threads](https://wordpress.org/support/theme/book-lite/)
 * [Active Topics](https://wordpress.org/support/theme/book-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/book-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/book-lite/reviews/)

## Tags

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

 * 9 replies
 * 3 participants
 * Last reply from: [Kye](https://wordpress.org/support/users/gmax21/)
 * Last activity: [11 years, 10 months ago](https://wordpress.org/support/topic/increase-header-background-image-height/#post-5076618)
 * Status: not resolved