Home Forums Air WordPress Theme Header background image

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #23476
    applemint
    Participant
    Purchased
    Supported

    I like how the header background image (wooden desk with computer) for the demo About page is positioned at fullwidth and located and would like to do something similar.
    But when I look at the Edit Page of the demo About page, I can’t find where or how that photo was added to the page. It is not set as a Featured Image and it’s also nowhere to be seen in the Page Builder.
    Thank you.

    #23477
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    It comes from the Fullwidth Wrap(click settings Fullwidth Wrap to upload an image, set height as 400): https://www.dropbox.com/s/ijtscif4uheosgi/qq20201223-094328.jpg?dl=0

    Please set the options(Page Options) also: https://www.dropbox.com/s/7olqwp6px3xmh7f/qq20201223-094405.jpg?dl=0

    Regards!

    SeaTheme – SeaTheme.netTwitterFacebook

    #23484
    applemint
    Participant
    Purchased
    Supported

    Thank you for instructions. I followed both two steps, however, the image is not appearing. Just a blank narrow header with logo and menu. For the wrap settings I did identical settings as the demo page, except for using my own image. As a little test I then also tried just a simple background color which also didn’t have any results. Any suggestions?

    #23485
    applemint
    Participant
    Purchased
    Supported

    Found the reason. I had entered 500px instead of just 500. Solved.

    Though I have a new follow up question. This seems to crop the image in height, even when I down-scale the image to 500 px height (same proportions), the image quality just gets blurred. The original photo is 2048 x 864 and is now down-scaled to 1185 x 500. I also tried cropping the sides of the image, with little effect. The image seems to extend beyond the full browser width. Any further suggestions for this?

    #23488
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    It may be caused by the parallax effect code.
    Please set 0.1 for “Parallax Ratio”.

    Regards

    #23495
    applemint
    Participant
    Purchased
    Supported

    Yep, that works. Thank you!

    #23913
    applemint
    Participant
    Purchased
    Supported

    I now notice that on laptop view, the white space between header background image and content text increases drastically at certain narrower browser widths. When changing browser width (making smaller), the header image adapts proportionately and becomes less high, while the content title + text, stays at same place of the browser, causing a large white space. Could this be made more responsive? I hope this explanation is clear enough. See screenshots in next message.

    #23914
    applemint
    Participant
    Purchased
    Supported
    This reply has been marked as private.
    #23920
    SeaTheme
    Keymaster
    Purchased
    Expired

    Please paste the custom CSS code to “Appearance > Customize: Additional CSS”

    body.home .fullwidth-wrap .parallax img {
        display: none; 
    }
    body.home .back-background-img-mobile {
        display: block;
    }
    #23926
    applemint
    Participant
    Purchased
    Supported

    Working. Thank you!

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

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!