Background header

[blaouchez]

Hello,

Is it possible to place an image in the background of the entire header (menu + top menu)?

Regards

[Mohammad – SUPPORT]

Hi,
Please use custom css code as given below:
/*Please change the image path*/
#top-bar,#header-section{background:url(image_path_url) no-repeat;}

Thanks 🙂
With Best Regards
Swift Ideas

[blaouchez]

Thank you! it works if I add “!important,” but I have the same picture in main nav and in the top bar

How to display a different image to the top bar?

[Mohammad – SUPPORT]

Hi,
Please use code like :

#top-bar{background:url(image_path_url) no-repeat !important;}
#header-section{background:url(image_path_url) no-repeat !important;}

Thanks

[blaouchez]

Perfect;)

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m glad that issue resolved .
Thanks 🙂
With Best Regards
Swift Ideas

[blaouchez]

I back to the question because I forgot one very important detail:
Is that the photo can be responsive?

Regards

[Mohammad – SUPPORT]

Hi,
Please use code like this :

#top-bar{background:url(image_path_url) no-repeat !important; background-size:100% auto;}
#header-section{background:url(image_path_url) no-repeat !important; background-size:100% auto;}

Thanks

[blaouchez]

Thank you but the background image does not change size

Test : http://cluster007.ovh.net/~montourckh/?page_id=2

[Kyle – SUPPORT]

Hi

Just checked on my system and works fine? Please clear your cache and let me know

– Kyle

[blaouchez]

I use Safari and Chrome and I have emptied the cache

In Responsive, the image should be reduced when reducing the browser window, no?

[Kyle – SUPPORT]

Unfortunately it can’t resize the way you are thinking, it will always cover the height of the window

– Kyle

[blaouchez]

If I use a background for my pages (Option > BG options > background size) is perfect. (ex : http://cluster007.ovh.net/~montourckh/page_id=2 )

Is it possible to do the same for the background of the header?

[Mohammad – SUPPORT]

Hi,
You can use code like that :

#top-bar{background:url(image_path_url) repeat fixed center top !important;}
#header-section{background:url(image_path_url) repeat fixed center top !important}

Thanks

[blaouchez]

Thank you but the picture does not adapt to the format when reducing browser window

http://cluster007.ovh.net/~montourckh/?page_id=2