V1.6.1.6 need to change header height and reduce columns.

[huntleybill]

This is my site:  https://www.billrauscheroutboards.com/

 

 

I have an image for the header. As you can see, the image does not quite fit. Can you tell me how to make the image fit and also how to put only one image in the header that fills the page. 

 

Thank you

[rocky]

It's tricky, since the header is responsive, so the width and height of the header will vary. Even if you turn off the repeat by adding background-repeat: no-repeat!important; to the header element, it's not going to look good at all resolutions.

 

I would suggest maybe creating a repeating ocean and sky background that will work no matter the width, then you can have a separate logo and text displayed on top of that in a responsive way.

[huntleybill]

Hmmmm...Maybe that might work better than what I was trying to do. 

Thank you Rocky

[huntleybill]

OK..Rocky, I put in a repeating water background for the header. I created a logo then went into my theme and uploaded it . I can see it in the back office but it does not show on the website. How do I get the logo to show? Also, Can I make the header taller?

 

https://www.billrauscheroutboards.com/

[rocky]

I see you've commented out the logo in header.tpl. You'll need to uncomment that.

 

You can add something like height: 200px; to the header element to increase the height of the header.

 

I also suggest that you smooth the edges of the background so it isn't as obvious where it repeats.

[huntleybill]

I see you've commented out the logo in header.tpl. You'll need to uncomment that. I put the original header.tpl file back. I still don't get a logo. (Unless I got the wrong header.tpl file).

 

You can add something like height: 200px; to the header element to increase the height of the header. I have no idea where/how to do this. Can you explain please?

 

I also suggest that you smooth the edges of the background so it isn't as obvious where it repeats.  I have no ideal how to do this either. On my laptop, I see no seems at all.

Edited October 24, 2016 by huntleybill (see edit history)

[huntleybill]

OK Rocky. 

I got the logo back on and the water background. I don't like my new logo so I will have to work on that but that is out of the scope of this post.

 

To change the height of the header is it the header.tpl file I need to do it in? If so, can you tell me which line I need to edit?

[rocky]

You'll need to edit the section on line 5734 of themes/default-bootstrap/css/global.css:

header {
    background-image: url("../../../img/bg.jpg") !important;
    position: relative;
    z-index: 1;
}

Add the height in there.