Title: Defining Header Image Height
Last modified: March 23, 2017

---

# Defining Header Image Height

 *  Resolved [businessbuilder](https://wordpress.org/support/users/businessbuilder/)
 * (@businessbuilder)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/defining-header-image-height/)
 * Hi – I’m just starting with Bento – the free version. I’m building my Static 
   Home Page. My site Identity Logo looks good…. My menu is correct up on the right
   side. So now I’m trying to set my Header Image. When I have a page title and 
   Call to Action buttons the height is great. But if I remove those and just do
   a picture the height is really thin… on the PC screen… if I go onto tablet-size
   or phone-size there is more height, and you can see the whole photo. How do I
   get more height for the Header Image without using a Page Title or Call to Action?

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

 *  Theme Author [satoristudio](https://wordpress.org/support/users/satoristudio/)
 * (@satoristudio)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/defining-header-image-height/#post-8947765)
 * Hey [@businessbuilder](https://wordpress.org/support/users/businessbuilder/),
 * thank you for choosing Bento!
 * The [extended header feature](http://satoristudio.net/bento-manual/#extended-header)
   is indeed structured around the page title, because it is in essence a fancy 
   way of presenting one. Its height is therefore also dependent on the number of
   lines in the title – if there was a separate height setting for the header, there
   would inevitably be cases where the title overflows the header image, given the
   vast number of screen size and aspect ratio options on the modern web.
 * What you can do instead is use the SiteOrigin Hero widget from the [Content Builder](http://satoristudio.net/bento-manual/#content-builder)
   interface – you don’t need a title inside one; you can also make the containing
   row stretch the entire screen width by using the “Row Layout” drop-down in the“
   Layout” tab of the right panel in the row options pop-up window.
 * Sincerely,
    Andrii / Satori Studio
 *  Thread Starter [businessbuilder](https://wordpress.org/support/users/businessbuilder/)
 * (@businessbuilder)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/defining-header-image-height/#post-8948967)
 * Thank you Andrii / Satori Studio,
 * Your explanation of the structure of the extended header makes sense.
 * I did as you suggested and removed the header image and used a SiteOrigin Hero
   widget. I am now encountering two other glitches.
 * 1) Between my logo and menu and the new image is a huge white space. How do I
   get rid of that so my photo bumps up right under the menu header?
 * 2) My photo is now much skinnier that the width of the page. How do I get it 
   to go the full width?
 * Your assistance is appreciated.
    –K
 *  Theme Author [satoristudio](https://wordpress.org/support/users/satoristudio/)
 * (@satoristudio)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/defining-header-image-height/#post-8951563)
 * Hey K,
 * I’ll go over the questions in the same order:
 * 1. Please try the following: when in edit mode for that page, hover over the 
   little wrench icon in the top right corner of the row which contains the Hero
   widget; click on the “Edit Row” in the drop-down that appears. In the ensuing
   settings overlay, expand the “Layout” tab on the right and inside it, change 
   the value of the “Row layout” drop-down to “Full width stretched”.
 * 2. The above manipulation will also make the image stretch the entire width of
   the page; just make sure you’ve added the picture as the frame background, not
   inside the content of the frame via the “Add Media” button 😉
 * Sincerely,
    Andrii / Satori Studio
 *  Thread Starter [businessbuilder](https://wordpress.org/support/users/businessbuilder/)
 * (@businessbuilder)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/defining-header-image-height/#post-8957075)
 * Hello Andrii / Satori Studio,
 * The first trick worked. Changing the “Row Layout” to “Full width stretch” makes
   a nice difference. I’ll remember that as I am working on the rest of my website,
   so that I can control the visual impact of each row.
 * But I’m still having difficulty with the picture. I had been putting it inside
   the content of the frame using the “Add Media” button. So I went into that and
   deleted the picture.
 * Then I went into the Background Section and uploaded my background image. I realized
   I could control the height of the picture by changing the number in the “Height”
   box. That worked well.
 * My difficulty is that I still have a white space between the Menu Bar at the 
   top and the photo from my Hero Widget.
 * For the row itself, I have zeros (0) in all the spaces for the padding.
 * In the Hero Widget, on the Left, under Layout, I have zeros in all the spaces
   for padding.
 * In the content portion of the Widget the Background Image type is Cover.
 * Under Design and Layout, I have the Height defined as 500px, and I have zeros(
   0) for Top and Bottom Padding, for Extra Top Padding, and for Side Padding. The
   Heading Size and Text Size are zero, but that shouldn’t matter because there 
   is no text.
 * Actually —- I think this extra space is something else and not from my Widget.
   Because, when I move my rows around and put different Widgets up at the top, 
   there is still a huge gap between my Menu and the first Widget.
 * I’ve looked at the Appearances, Customize, and I don’t see anything else that
   can define a height, or spacing or anything on my regular appearance for the 
   whole site.
 * (As an aside… I thought at one point earlier last week I was able to define the
   height, or at least the padding for the Logo/Menu area, but now I don’t see where
   I did that)
 * My main concern is the white space. If you want to take a look to see what I 
   mean about the huge whitespace, here is my temporary URL while I’m working on
   this…. [http://217.10d.myftpupload.com/](http://217.10d.myftpupload.com/)
 * Thank you for any assistance you can offer.
 * — K
 *  Theme Author [satoristudio](https://wordpress.org/support/users/satoristudio/)
 * (@satoristudio)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/defining-header-image-height/#post-8957385)
 * Hey K,
 * in order for the gap between the header and the image disappear, please try un-
   ticking the “Activate Extended Header” checkbox in the “Page Header Settings”
   section while in the editor mode for that page 🙂
 * Sincerely,
    Andrii / Satori Studio
 *  Thread Starter [businessbuilder](https://wordpress.org/support/users/businessbuilder/)
 * (@businessbuilder)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/defining-header-image-height/#post-8958304)
 * Hi Andrii,
 * That worked! I un-ticked the “Activate Extended Header” and my whitespace disappeared!
 * I added some blank additional pages, verified that the box was un-ticked, and
   checked how they looked on a laptop, tablet, and phone. All looked good.
 * Because of going through this with you, I’ve learned the Bento and Page Builder
   are powerful tools, and there are lots of these nuances available to let me end
   up with a display that will best show off my website and ideas.
 * I’m sure the forum – previous questions from others – will be useful for me in
   continuing to create my site. If I need specific help, I’ll post another question
   thread.
 * Thank you so much for your patience in assisting me with this.
 * — K
 *  Theme Author [satoristudio](https://wordpress.org/support/users/satoristudio/)
 * (@satoristudio)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/defining-header-image-height/#post-8961259)
 * glad to hear it’s been resolved! Should you face any difficulties with Bento,
   don’t hesitate to contact me.
 * Best,
    Andrii / Satori Studio

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

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

 * ![](https://i0.wp.com/themes.svn.wordpress.org/bento/2.5/screenshot.png)
 * Bento
 * [Support Threads](https://wordpress.org/support/theme/bento/)
 * [Active Topics](https://wordpress.org/support/theme/bento/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/bento/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/bento/reviews/)

## Tags

 * [header image](https://wordpress.org/support/topic-tag/header-image/)
 * [header image height](https://wordpress.org/support/topic-tag/header-image-height/)
 * [static home page](https://wordpress.org/support/topic-tag/static-home-page/)

 * 7 replies
 * 2 participants
 * Last reply from: [satoristudio](https://wordpress.org/support/users/satoristudio/)
 * Last activity: [9 years, 1 month ago](https://wordpress.org/support/topic/defining-header-image-height/#post-8961259)
 * Status: resolved