This topic has 13 replies, 5 voices, and was last updated 8 years, 10 months ago ago by Jack Richardson
Hi there!
I would like to know custom CSS for applying background image in header.
Cheers!
Josh.
Hello,
please add this code to custom.css file;
.double-border{
background-image: url(images/image.png);
height: auto;
width: 100%;
background-repeat: no-repeat;
}
You need to change ‘images/image.png’ with correct path to image file.
Regards,
Stan Russell.
Hello,
First you need to upload image to wp-content\themes\legenda\images folder.
You can use this code in custom.css file to add image into header area.
.header{
background-image: url(images/here_is_name_of_your_image.png);
}
Here is a video tutorial how to create custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.
Regards,
Robert Hall.
Thanks guys!
How would I make the image be responsive with the rest of the site?
(As I want certain elements of the header image to stay in between the logo & nav)
Cheers!
Josh.
Hello,
please show us on screenshot what results do you want to achieve.
Regards,
Stan Russell.
Ok have attached screenshot of how I want the header to look like, even when the width of browser is extended…
Also now the image in header is displaying in footer! How do I remove?
Cheers!
Hello,
Sorry but there is no screenshot in your post. Please resend it.
Also provide us with wp-admin panel credentials in Private Content.
Thank you.
Regards,
Eva Kemp.
Info in private content below…
Thanks Eva!
Hello,
As I see your header is shown fine:
http://storage1.static.itmages.com/i/15/0602/h_1433232880_8261785_f83880b973.png
Concerning the responsiveness add this code in custom.css file:
@media (max-width: 780px) {.header {
background-image: url("http://hersbridaltest.jk-design.com.au/wp-content/themes/legenda/images/header.png") !important;
background-attachment: inherit;
background-position: top left !important;
background-size: 100% 50%;
background-repeat: no-repeat;
}}
Regards,
Eva Kemp.
Hi Eva,
Code isn’t working? I just want the header to stay as shown in your screenshot, even when the page width is expanded… At the moment the header image is stationary while the logo / nav move & overlap…
Image is also still in footer?
Plus how do I make the smaller nav bar that hovers on page when scrolled, transparent?
Cheers!
Josh.
Hello,
Currently your background image is added in the nav bar where menu is located. On mobile devices a standard desktop menu is hidden and mobile menu loads, so background image can’t be visible.
If you want to show it on mobile you have to set background image for header and not for nav bar (with the code I added you in the previous post).
To remove it from footer you need remove the code:
.double-border {
background-image: none !important;
}
and add this code:
.header-type-3 .main-nav {
background-image: url("http://hersbridaltest.jk-design.com.au/wp-content/themes/legenda/images/header.png") !important;
}
Please note background image can’t be shown on mobile devices as now it’s added in the menu section and on mobiles standard menu is hidden, so the background image is hidden too.
Thank you.
Regards,
Eva Kemp.
Ok thanks.
But I still just want the header image to be responsive & move accordingly like the rest of the page. Is there a way to only make the slider responsive & keep the rest of the site fixed? (this is viewing on desktop, mobile viewing without the image is fine)
Cheers!
Hello,
Unfortunately there is no possibility to make only slider responsive and keep the rest of the site fixed. Sorry for the inconveniences.
Best regards,
Jack Richardson.
You must be logged in to reply to this topic.Log in/Sign up