Title: Header 100% width
Last modified: August 24, 2016

---

# Header 100% width

 *  Resolved [Xafari](https://wordpress.org/support/users/xafari/)
 * (@xafari)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/header-100-width/)
 * Dear Sir,
 * I want the “logo” image to display 100% header width.
    Now the image is small,
   not very nice.
 * How to do this?
 * I already installed the plugin “modular custom css” to add extra code.
 * Here the link to the blog:
    [http://www.tenerifevakantie.com/](http://www.tenerifevakantie.com/)
 * Thanks,
    Guy

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

 *  [bdbrown](https://wordpress.org/support/users/bdbrown/)
 * (@bdbrown)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/header-100-width/#post-5981033)
 * Hi Guy. If you make your image the same width as your site, you can use this 
   css to adjust it:
 *     ```
       #header .pad, .site-title {
         padding: 0;
       }
       .site-title a img {
         max-height: 400px;  /* this is the height of your image; may need to use !important */
       }
       ```
   
 * Or you could remove the logo in Theme Options and try this css to set a background
   image in the header. If your image is less than 400px in height you’ll need to
   make adjustments:
 *     ```
       /* set header background image; image size is site width x 400px */
       #header {
         background: url(http://yoursite.com/wp-content/uploads/yourimage.jpg) no-repeat center top;
         height: 400px;
       }
   
       /* push the header menu down */
       #header .pad {
         height: 340px;
       }
   
       /* reduce content margin to align with bottom of menu */
       #page {
         margin-top: -11px;
       }
   
       /* media queries to accommodate above changes */
       @media only screen and (min-width: 720px) and (max-width: 960px) {
         #header .pad {
           height: 341px;
         }
         #page {
           margin-top: 0;
         }
       }
       @media only screen and (max-width: 719px) {
         #header .pad {
           height: 400px;
         }
         #page {
           margin-top: 50px;
         }
       }
       ```
   
 *  Thread Starter [Xafari](https://wordpress.org/support/users/xafari/)
 * (@xafari)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/header-100-width/#post-5981063)
 * Thanks for your prompt reply 🙂
 * A stupid question: what is the width of the site?
    So that I can adjust the image.
 * In style.css i see #wrapper { min-width: 1024px; height: 100%; }
    en .container-
   inner { max-width: 1380px; min-width: 1380px; width: 100%; margin: 0 auto; }
 * What size should i make the image?
 * Regards,
    Guy
 *  Thread Starter [Xafari](https://wordpress.org/support/users/xafari/)
 * (@xafari)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/header-100-width/#post-5981078)
 * Hi,
 * I made the image 1380px and it seems to work.
 * I also changed some colors to make it look better.
 * What do you think?
 * [http://www.tenerifevakantie.com](http://www.tenerifevakantie.com)
 * Thanks for your help and input 🙂
 * Regards,
    Guy
 *  Thread Starter [Xafari](https://wordpress.org/support/users/xafari/)
 * (@xafari)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/header-100-width/#post-5981082)
 * Thanks!

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

The topic ‘Header 100% width’ is closed to new replies.

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

 * 4 replies
 * 2 participants
 * Last reply from: [Xafari](https://wordpress.org/support/users/xafari/)
 * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/header-100-width/#post-5981082)
 * Status: resolved