Hi ! I have a question. Would it be possible to have a nice background image/texture/pattern for the top header, the main header (menu navigation) and the footer where the widgets are? What is the perfect size to create the background image in pixels and how do I code it? Thank you!
You can use any bcackground patterns available one site is http://subtlepatterns.com/ . You will then have to add them via css. Please provide us link of the pattern when you have uploaded them on your server and i will write up some custom css for it.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
body #header-outer.transparent {
background: url(http://www.floorwise.co.uk/wp-content/uploads/2019/10/PROFILES-Website-main-header-recreate.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
body #header-outer:not(.transparent) {
background: url(http://www.floorwise.co.uk/wp-content/uploads/2019/10/PROFILES-Website-main-header-recreate.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Hi ! I have a question. Would it be possible to have a nice background image/texture/pattern for the top header, the main header (menu navigation) and the footer where the widgets are? What is the perfect size to create the background image in pixels and how do I code it? Thank you!
Hi Tahir, just to clarify, the look i want to go for is this: https://www.dropbox.com/s/p3nkuyveocialqk/Screensh...
like creative market place!
Hey Suzana!
You can use any bcackground patterns available one site is http://subtlepatterns.com/ . You will then have to add them via css. Please provide us link of the pattern when you have uploaded them on your server and i will write up some custom css for it.
Cheers
ThemeNectar Support Team
HI Tahir!
I would like to use this pattern called 'lighter' for the main menu: http://suskadesign.com/gb/wp-content/uploads/bg/li...
and I would like to use this pattern called darker for the top menu: http://suskadesign.com/gb/wp-content/uploads/bg/da...
Thank you so much! I love the pattern website you sent me :)
Hey Suzana!
Add this into the Custom CSS box located in your Salient Options panel Or on the Visual Composer Css button so the css shows on that page only:
body #header-secondary-outer { background: url(http://suskadesign.com/gb/wp-content/uploads/bg/darker.png); } body #header-outer { background: url(http://suskadesign.com/gb/wp-content/uploads/bg/lighter.png); }
Cheers
ThemeNectar Support Team
Hi Tahir
This works well but is there a way to make it responsive? I tried width: 100% ...
Many thanks
Pete
@Pete, Not sure i understand. Could you provide the page url ?.
ThemeNectar Support Team
Just wondering if the background image could be made to resize with the container width, for different browser widths
http://floorwise.2hdev.co.uk/ pass 2hdev
The container width is set to max of 1425, the image is 1200 wide.
Thanks!
Pete
Hey Again,
Try using the cover method.
body #header-outer { background: url(http://www.floorwise.co.uk/wp-content/uploads/2019/10/PROFILES-Website-main-header-recreate.jpg); background-size: cover; background-repeat: no-repeat; }Thanks
ThemeNectar Support Team
That works well - thank you!
Great solution Tahir!
What if I wanted to only do this for non-transparent headers?
That is, on pages on which I've enabled "Force Transparency On Navigation" the image does not appear.
Is this possible?
Hey Again,
Sure,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
body #header-outer.transparent { background: url(http://www.floorwise.co.uk/wp-content/uploads/2019/10/PROFILES-Website-main-header-recreate.jpg); background-size: cover; background-repeat: no-repeat; }Thanks
ThemeNectar Support Team
Sorry, I wasn't clear.
I would like to use the background image in the header by default,
but NOT use it when the page is set to transparent.
Thanks
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
body #header-outer:not(.transparent) { background: url(http://www.floorwise.co.uk/wp-content/uploads/2019/10/PROFILES-Website-main-header-recreate.jpg); background-size: cover; background-repeat: no-repeat; }Thanks
ThemeNectar Support Team
That worked!
You are the man Tahir!!!
Is there an easier way to do this yet?
Hi There,
We do not yet have a feature to add image to the header except through css, however this is being looked into and once it is out we will let you know.
Thanks.