Scrolling pages while the background-header image remains stationary.

  • Author
    Posts
  • #124771

    Hello,
    when I made this site/blog two years ago the pages background-header image behaved like the home page slide show.
    They had the same size and they remain stationary while you could scroll the page.
    Now I changes some contents in the pages like text and images but not the header images and I realize that the blog changed and the pages header background images are scrolling with the page and the size is smaller even if I uploaded 1800×800 px the height is short.
    What can I do to make the pages header images again similar to the home slide show?
    Thank you in advance for reply.

    The blog I need help with is lafestadeisogniebisogni.it.

    #124904

    emilysuesrq
    Theme Author

    Hello,

    Please add the following code within the Addional CSS section of the customizer. That should resolve the issue. Let me know if you need any further help with this.

    Best Regards,
    Emily

    #124907

    which code?

    #124924

    emilysuesrq
    Theme Author

    My apologies! This code:

    .header-banner-content img {
    display: block !important;
    }

    -Emily :)

    #124930

    Thank you
    I will try and let you know.

    #124932

    Hello I added the code but…

    1) Now the header images of the pages is higer than the slide show height

    2) The home page scoll over the slide show meanwhile th eslide show is fixed but the other pages don’t do the same. Indeed the header images of the other pages scroll together with the pages.
    Here you can see a video of that:
    http://www.creativeaddmaker.com/works/video.mp4

    #124954

    emilysuesrq
    Theme Author

    Hello,

    Please add the following into Additional CSS to equalize the height of the images:

    #header {
    max-height: 640px;
    }

    -Emily

    #124956

    I have to add this plus the one I previous added or I have to put this and delete the other one?

    What about the scrolling over the image?

    Thank you

    #124957

    With this code:

    #header {
    max-height: 640px;
    }

    equalize the height of the images to the slide height but the main menu disappear, look at this:
    http://www.creativeaddmaker.com/works/mainmanu.jpg

    #124958

    With this code:

    #header {
    max-height: 640px;
    }

    equalize the height of the images to the slide height but the main menu disappear, look at this:
    http://www.creativeaddmaker.com/works/mainmenu.jpg

    #124961

    Please, this is not a resolved Topic, I wonder why you chaged the status?
    :-(

    #124962

    Hello
    I do not understand if I have to oper another topic or not.
    I’m still having problem with immages and slid show.
    When I personalized this theme 2 year agos was perfect now is not!
    It is possible to have a support by chat?
    I’m still paying for this and one reply a day is not good for me because I have to finish and with one reply a day I will finish next year.
    I now have a problem with image resize of the header slida and single images of the header pages.
    Thank you.

    #124963
    #124980

    emilysuesrq
    Theme Author

    Hello,

    I understand that the code I have previously given has caused your menu to disappear. Let start over… please remove the previous codes from Addtional CSS, and all the following instead. This should solve both issues of header image height, as well as the scrolling issue. Where the “min-height” number is, adjust this number to whatever looks best for you.

    #header {
    background-attachment: fixed;
    }
    .banner-title-wrapper {
    min-height: 360px;
    }

    Let me know how this works for you.

    -Emily

    #124995

    Hello,
    thank you for answering my questions.

    This code solve the header image height that (I settet to 520px), and the scrolling issue but the text is not centered in height anymore.

    Please see this screenshot:
    http://www.creativeaddmaker.com/varie/img/wordpress/headertext.jpg
    (as you can see the image is zoomed and shows just a small zoomed detail of the entire image I choose, but this is another topic…).

    Also look how changed the 3 central box size in the home page.

    Please see this screenshot:
    http://www.creativeaddmaker.com/varie/img/wordpress/boxhomepage.jpg

    #125006

    itsdavidmorgan
    Theme Author

    Hello,

    Replace this code:

    .banner-title-wrapper {
      min-height: 360px;
    }

    With this code:

    .header-banner-content .flex-wrapper {
      min-height: 480px;
    }

    The new code should hopefully increase the height of the banner image while keeping title text centered vertically.

    I hope this helps. Thanks!

    #125026

    Hello
    thank you for answering.
    This code seems work fine.
    Just one thing the 3 central boxes of the home page are bigger than the normal theme. Not big as the previous code (http://www.creativeaddmaker.com/varie/img/wordpress/boxhomepage.jpg) but still bigger that the normal theme: https://wordpress.com/theme/restaurant
    In my opinion is better because normally you cannot click onthe part of the box where is the text but only on the picture part so if the picture part is bigger will be more intuitive…
    I did not understand why the text part is not clickable and why whe you put the sign “read more” in edit the button “read more” disappear… But maybe this is another post.

    #125037

    itsdavidmorgan
    Theme Author

    Hello,

    Add the following code:

    .home-featured-banner .banner-title-wrapper {
      box-sizing: border-box;
    }
    .home-featured-banner .headline.img-headline {
      margin: 60px auto;
    }

    That should resolve the issue of the home page sections being larger. I hope this helps!

    #125057

    It works
    thank you.

    #125059

    emilysuesrq
    Theme Author

    Glad it worked! You’re welcome :)

The topic ‘Scrolling pages while the background-header image remains stationary.’ is closed to new replies.