Custom Header Image - by jkdesign - on WordPress WooCommerce support

This topic has 13 replies, 5 voices, and was last updated 8 years, 10 months ago ago by Jack Richardson

  • Avatar: jkdesign
    jkdesign
    Participant
    May 21, 2015 at 05:58

    Hi there!

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

    Cheers!
    Josh.

    12 Answers
    Avatar: stan
    Stan Russell
    Participant
    May 21, 2015 at 07:27

    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.

    Avatar: Robert Hall
    Robert Hall
    Support staff
    May 21, 2015 at 07:31

    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.

    Avatar: jkdesign
    jkdesign
    Participant
    May 27, 2015 at 03:14

    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.

    Avatar: stan
    Stan Russell
    Participant
    May 27, 2015 at 08:07

    Hello,

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

    Regards,
    Stan Russell.

    Avatar: jkdesign
    jkdesign
    Participant
    May 27, 2015 at 08:23

    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!

    Avatar: Eva
    Eva Kemp
    Support staff
    May 27, 2015 at 12:15

    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.

    Avatar: jkdesign
    jkdesign
    Participant
    June 2, 2015 at 03:04

    Info in private content below…

    Thanks Eva!

    Please, contact administrator
    for this information.
    Avatar: Eva
    Eva Kemp
    Support staff
    June 2, 2015 at 09:31

    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.

    Avatar: jkdesign
    jkdesign
    Participant
    June 3, 2015 at 04:10

    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.

    Avatar: Eva
    Eva Kemp
    Support staff
    June 3, 2015 at 11:35

    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.

    Avatar: jkdesign
    jkdesign
    Participant
    June 4, 2015 at 02:46

    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!

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 4, 2015 at 10:25

    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.

  • Viewing 13 results - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.