Custom Header Image - by jkdesign - on WordPress WooCommerce support

12 replies5 participantsUpdated by Jack Richardson

  • Avatar: jkdesign
    jkdesign
    Participant

    Hi there!

    I would like to know custom CSS for applying background image in header.

    Cheers!
    Josh.

    #65125 Copied Theme version: 2.7.1

    12 Answers

    Avatar: stan
    Stan Russell
    Participant

    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.

    #65135 Copied
    Avatar: Robert Hall
    Robert Hall
    Participant

    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.

    #65136 Copied
    Avatar: jkdesign
    jkdesign
    Participant

    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.

    #66189 Copied
    Avatar: stan
    Stan Russell
    Participant

    Hello,

    please show us on screenshot what results do you want to achieve.

    Regards,
    Stan Russell.

    #66203 Copied
    Avatar: jkdesign
    jkdesign
    Participant

    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!

    #66212 Copied
    Avatar: Eva
    Eva Kemp
    Participant

    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.

    #66266 Copied
    Avatar: jkdesign
    jkdesign
    Participant

    Info in private content below…

    Thanks Eva!

    Please, contact administrator
    for this information.
    #67416 Copied
    Avatar: Eva
    Eva Kemp
    Participant

    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.

    #67464 Copied
    Avatar: jkdesign
    jkdesign
    Participant

    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.

    #67716 Copied
    Avatar: Eva
    Eva Kemp
    Participant

    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.

    #67782 Copied
    Avatar: jkdesign
    jkdesign
    Participant

    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!

    #67976 Copied
    Avatar: Jack Richardson
    Jack Richardson
    Support staff

    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.

    #68044 Copied

Want to reply? Log in, or register with your ThemeForest purchase code, to reply to this topic.

Login / Register