Add picture to header area

chafuringo · August 2016

Hi

I am working with the Demo of the pre-built website "Simple". For the header I am working with the options "boxed sticky" and "minimalist without header space". The URL is: http://www.impulsncoaching.ch/auer/

I would like to insert a picture to the header area. The goal is to make it look like in the picture below. How can I achieve this?

Thanks for your help! I really appreciate working with this theme...

Albert · August 2016

Hi,

to add background image to the header area, you need to use the following css:

#Header .top_bar_left, .header-classic #Top_bar, .header-plain #Top_bar, .header-stack #Top_bar, .header-split #Top_bar, .header-fixed #Top_bar, .header-below #Top_bar, #Header_creative, #Top_bar #menu, .sticky-tb-color #Top_bar.is-sticky { background-image: url('PATH-TO-THE-IMAGE') !important; }

heikijapan · September 2016

Hi!

I also want to have a PIC in the header because most sites nowadays have one top image in the header. So, in case of Be-theme, do I have to use SLIDERS for that purpose or there is a way around?

Btw, is using SLIDERS the best and correct way to insert just ONE pic into the header?

The reason why I am asking this is I do not want to mess around with sliders every time.

All the best

Albert · September 2016

@heikijapan To use background images in Top Bar section, you need to use the css we gave above.

chafuringo · September 2016

Thanks for your help! If I insert a picture it is always displayed duplicated in the header area:

http://www.impulsncoaching.ch/auer/

what is the correct/best size of the picture to be inserted?

thanks a lot!

heikijapan · September 2016

Hi to all!

to muffingroup:

Q1: You suggested me to add CSS code into my template, but can you please be so kind and tell me EXACTLY where to put it? Really just do not know, sorry for that.

Q2: I have the same question as chafuringo! I need to know the best SIZE for header image.

All the best

HEIKI

Albert · September 2016

@chafuringo To do not repeat background as well, you need to use the following css instead of above:

.header-stack #Top_bar {
    background-image: url("http://www.impulsncoaching.ch/auer/wp-content/uploads/sportler.png") !important;
}

@heikijapan

1) The code should be put under Theme options > Custom CSS & JS > Custom CSS section (this was explained in the documentation of course).

2) We usually use 1920px width (Full HD) but it depends on you which size would be the best. In each case, best size image might be different.

chafuringo · September 2016

I added a background image to the header area. What can I do so that this image is not shown in the sticky header?

Albert · September 2016

@chafuringo To do not display background image in sticky header, you need to use the following css instead:

.header-stack #Top_bar:not(.is-sticky) {
    background-image: url("http://www.impulsncoaching.ch/auer/wp-content/uploads/sportler.png") !important;
}

Add picture to header area

Comments