Large header with scrolling in another theme

Most likely possible. But without seeing the code for the other theme (is it a free one from the repo here?) copying over the code from 2017 may not work correctly.

Thank you very much for your reply, Jarret. The theme that we’re using right now is Graphene:

https://www.ads-software.com/themes/graphene/

Again, I really appreciate your help!

Cheers,
Nathan Zachary

I think what you’re looking for is the parallax effect that is pretty popular nowadays. The following code should give you a start in Graphene

.home #header {
    height: 250px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('/wp-content/uploads/2011/07/cropped-dsc04563.jpg');
}

Basically, you have to remove a set header image from the theme as the parallax effect has to use a background image. In the above code you should just need to specify the height of your image and then the URL to the image and I think it should work for what you want.

I set the .home class in there so it should only affect the homepage of the site but try out that code in your current setup and let me know how it goes.

Thanks a lot for your time and help, Jarret. I tried adding that code (and a couple derivatives of it) to my custom CSS, but it doesn’t really seem to do much within the Graphene theme. Actually, it doesn’t even pull the background image, which makes me wonder if it is just being covered by another element. Changing the height also didn’t make any noticeable difference in the allocation of space at the top of the page. Again, that makes me think that there is possibly some other element obfuscating the changes from this CSS.

I appreciate your help, but it ultimately might not be something that plays well with Graphene.

You changed out the image URL in the CSS for the one you want to use on your own site right? Otherwise, the one I provided wouldn’t work as you don’t have that image on your server.

Are you working on this on a live site that I could look at or do you have it locally so it can’t be viewed?

Also, this may or may not work overall and cause issues with the display of the header on pages that aren’t the homepage since we have to remove the default featured/header image from the code and add it in as a background image. Though we may be able to find something that works.

Hi Jarret,

Yes, I did change out the URL and even verified it with the “inspect element” portion in Chromium & Firefox. For now, I am just going to forego spending any further time trying to get the parallax effect to work with Graphene. If the client wants to keep at it, I will work with you to see what your labour rate will be (you shouldn’t have to work for free).

Thanks again for your help!

Cheers,
Nathan Zachary