[Resolved] header white space

[Chad Biggs]

Currently I am using a fluid header and menu, the content is constrained at 1100px. My header image is 1100 by 125 and I find when the browser is fully open the image gets really big… Like it is supposed to, but it doesn’t look good. I tried constraining the header and it looks good and works good, except I am also using a body background image, so when the browser is fully open I can see the body background image on the sides of my header image. What I need is for my image max width to be 1100 px and white space on the sides of the image when the browser is open larger than 1,100 pixels and of course still be responsive. What would you recommend?

[Tom]

Hi Chad,

Just so I understand correctly – you want your header area to be fluid, but don’t want the big empty spaces on either side of your 1100px wide header? So basically, you want your header image to be 100% of the fluid header area?

Let me know 🙂

[Chad biggs]

lol … I want the header image not to exceed 1100px and a white bg that is fluid. here are a couple examples. This site when the browser is over 1100 px the header img gets really big (I have a 24″ screen). This site is the one that the image gets so big and I’m sure you will agree http://crispyskitchen.cboysweb.com/. This site the header is contained but has shows the body bg on the sides of the image (this site is supposed to be in maintenance mode)http://crispyskitchen.com/

[Tom]

And which one are you trying to achieve?

The first one is using the header as a background image and fluid header – which is why it’s stretching the whole screen.

The second one is doing the same, but with a contained header.

I’m just not sure which one you’re wanting to use?

[Chad Biggs]

I prefer the one that is showing the body bg, but I would like for a white bg next to the header image.

[Tom]

In that case, set your header layout to “Contained” and upload your header.

Then make sure your header background color is white, and you should be good to go?

Let me know 🙂

[Chad Biggs]

I apologize Tom… I may not have explained myself correctly. When the header is contained to 1100px with a white bg, in this setting, I like the size of the header image and how it responds to the browser size. However, because it is contained to 1100px, the body bg image shows on the sides of the header image when the browser is open more than 1100px. I want white on the sides of the header image because I am using a fluid menu bar with a white bg to distinguish between the content area. http://crispyskitchen.cboysweb.com/ .
The reason I am not using a fluid header is because I don’t like that the header image gets so big when the browser is maximized.

[Laura]

Just happened to be reading and if I may:
I think you maybe have a background set for the header. Check it in the customizer; “background images”->”Header”. If there’s a background set, just remove it. 🙂

[Tom]

Whether the header area is contained or fluid makes no difference to the container within the header – the fluid setting still has a 1100px container within it, but the rest of the header element expands to sides of your browser.

So what I’m saying is that no matter which setting you choose – fluid or contained – the container width (1100px) stays the same inside of the header.

What I think you may be doing is trying to add the header as a background image, if that’s the case, it will span the entire width of the browser.

What you want to do is add the header image through “Header Content” – this will contain it within the 1100px container, and keep the white on the sides of it.

[Chad Biggs]

Ok, I have added my image using the background image customizer. I have added a white bg color using the colors customizer. I do not have any css pertaining to the header in my child theme style sheet. I still do not have white bg on the sides of my header image. Could I send you a user name and password so you could take a look … if you have a moment?

[Tom]

You need to remove your image from the background image customizer, and add it inside the “Header Content” tab as a regular header image.

If that doesn’t work for your particular needs, you’ll need to add the background image to inner container of the header so it doesn’t span the whole page, you would do so like this:

.inside-header {
      background-image: url(THE URL TO YOUR IMAGE);
      background-size: cover;
}

[Chad Biggs]

Thank you Tom, I had used .inside-header earlier but I didn’t use the background-size with it. With a little tweaking to the @media screen and (max-width:), I was able to get exactly what I wanted. Thank you, you’re the best.

[Tom]

Awesome, I’m glad that worked 🙂

[Author]

Posts