Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • December 16, 2019 at 4:37 pm #1166487
    hanssmeijsters

    Hi,

    I want an image above the menu. I succeeded in inserting a background image in ‘General Styling’. This image is 1310 x 328 px, but still appears small. That is, he does not fill the entire heading. I solved that too with some extra code.

    #header_main{
    background: url(https://www.wiskundebijlesjandonker.nl/wp-content/uploads/2019/12/Home-Contact.jpg) repeat top right;
    background-size: contain;
    }

    #top #header_main > .container, #top #header_main > .container .main_menu ul:first-child > li > a, #top #header_main #menu-item-shop .cart_dropdown_link {
    height: 328px !important;
    line-height: 328px !important;
    }

    But…

    1 Is the above approach the right one? I want a different image in the header above the menu on every page.
    2 The image is not responsive. When resizing, the image on the bottom repeats. How can I prevent this? On all mobile / ipad formats!
    3 How can I place a different image above the menu on each page?

    It all seems rather complicated. So I wonder if my approach is the right one and if it could not be much simpler.

    December 20, 2019 at 5:39 pm #1168228
    Victoria

    Hey hanssmeijsters,

    1. You can use the page id class to put a different image in the different page
    Image 2019-12-20 at 17.38.12.png

    This code should have no-repeat:

    
#header_main{
background: url(https://www.wiskundebijlesjandonker.nl/wp-content/uploads/2019/12/Home-Contact.jpg) no-repeat top right;
background-size: contain;
}

    I am seeing the Layer Slider there not the image in the header. Did you remove it?

    Best regards,
    Victoria

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.