BeTheme : How to change HEADER IMAGE SIZE and HEADER background color

peterlum · February 2015

BeTheme : How to change HEADER IMAGE SIZE and HEADER background color?

I was able to put my Header image but the image was cropped.

Also, how do I change the header background colour so it matches the header image I use?

Thanks and hope to hear from you soon.

Albert · February 2015

Please send us url to page where you got this image and we'll have a look on it.

peterlum · February 2015

http://XXXX.com.sg/home/about-us/

http://XXXX.com.sg/home/

Albert · February 2015

To show full height of image, you must increase padding with below css:

body.header-below:not(.template-slider) #Header { padding-top: 270px; }

But width is exactly as image so this is fine. But to change header background color, please use below css:

#Header_wrapper { background-color: #000 !important; }

peterlum · February 2015

Thank you. Works like a charm.

Albert · February 2015

You're welcome

secureip · February 2015

Hi, is it possible to set the same parameters into a product page for Woocommerce?

Albert · February 2015

@secureip Only single product page for woocommerce? If this is what you mean then please send us url to your single product page and we'll see what we can do for you.

thewayfaringcollegiate · May 2016

I tried the above code to show the full height of the header image on my site by increasing the padding, but it didn't seem to do anything. What do I do?

Here's the site: http://www.thewayfaringcollegiate.com/

Albert · May 2016

@thewayfaringcollegiate As we can see, you already set min height of header to 650px and your header is complete. Not sure what else you mean then.

kayaker89 · July 2016

Hello I have the same question, my header image is very short height, not showing full size of image. I want it to go across full width of page, my pixels are set to 1150 and the photo I uploaded is 1150 wide so not sure why it is not going full width of page. also it is so short, height. Where do I edit this? I looked everywhere in betheme options.

Can you give me instructions on where to put this code you suggested?

body.header-below:not(.template-slider) #Header { padding-top: 270px; }

Thank you for any help in this, to see what I mean about my header image please look at my website;

http://www.gracearoundtheworld.com/?page_id=13

The image is short on not wide enough. Please help me with instructions on how to make it at least 400 pixels height and full screen width. Thank you!!! I'm very new to basic instructions is much appreciated!

Grace

Albert · July 2016

@kayaker89 To change the height of Header section, you need to use the following css:

body:not(.template-slider) #Header { min-height: 500px !important; }

Like each css, you need to put it into Theme options > Custom CSS & JS > Custom CSS section.

omino · September 2017

What is the code to change the Category Header size so that you can see more of the image?

Bryan · September 2017

Please show us what do you mean exactly.

BeTheme : How to change HEADER IMAGE SIZE and HEADER background color

Comments