Header background image

[applemint]

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.

[SeaTheme]

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.net – Twitter – Facebook

[applemint]

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?

[applemint]

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?

[SeaTheme]

Hi,

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

Regards

[applemint]

Yep, that works. Thank you!

[applemint]

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.

[applemint]

This reply has been marked as private.

[SeaTheme]

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;
}

[applemint]

Working. Thank you!

[Author]

Posts