I am trying to create a fixed image for the header of a website, but I am not finding a CSS hack that has worked within Hype yet. To see what I mean, view the image at the top of this page and scroll down: http://guitarjo.com/
Any ideas on how to target images within Hype to create this effect?
<style>
.HYPE_scene:not(.HYPE_element) {
overflow-y: visible !important;
}
#element {
position: fixed !important;
}
</style>
Make your document responsive (check scale width 100%)
Make sure your elements are pinned to where you want them to be
document with example 
fixedHeader.zip (20.6 KB)
I guess I shouldnât have said âheaderâ, implying the fixed navigation menu. I meant the wide-frame image that stays fixed in the background at the top of the page. I actually created the Guitar-Jo website in another visual editor called Sparkle. In that program, you can stretch a full page width image and select âfixed in windowâ, but I donât know whatâs happening on the backend to make that happen. Maybe the same method you provided could apply to an image, but I may want a different fixed image to appear later on in the page. For instance, this page I created in Sparkle has several fixed images in a row: http://nemerchant.com/support-services.html
You can create a class of fixed
.fixed {
position: fixed !important;
}
and apply that to any element for it to be fixed.
So you could put an image at the bottom of the layer order and give it the same class.
And then create other elements that will scroll over the top of it.
To change the images similar to your other example Iâm thinking some code to change the class (reset) so itâs no longer fixed and scrolls along with the other images until you reach the next image you want fixed and so on
Edit* I have a feeling the update which is on itâs way should make this task a lot easier 
That worked when âheight: 100%â was unchecked, but didnât when it was checked off. It seems as though I have opened up a whole can of worms as a result of implementing the big header that matches the viewport height. Hereâs the document trying to attempt the fixed picture while having the âoverflow-yâ .js function embedded so you can have content below the large header:
Fixed-Background-Picture.hype.zip (420.8 KB)
How would one calculate the heights? Do you mind sending the Hype file?
Sorry, Iâm still a novice in the code department
Hi Jonathan @jonlangberg4896
Here is something to help you.
I havenât really tested it but it should help you on your way.
Also as I said previously, the update to Hype should improve the responsive aspect.
D
fixedElements.hype.zip (45.7 KB)
There are a couple problems with that too, so sorry for being such a pain. When stretched to about 1033px in height, the bottom dark gray bar gets cutoff and is no longer accessible. When stretched smaller in height, the background picture is exposed below the footer.
the layout you want to achieve is currently not supported.
so at the end youâve got to rely on hacks which may work in most circumstances but will / may get lost on any update of hype.
so two possibilities:
1.) get the risk, but also learn (!) how to control it. otherwise youâd always rely on somebodys help
2.) go with built-in capabilities
warmly recommend 
: 2.)
Good advice Hans, thank you for all of your help!
Do you mind sending the latest Hype file that you posted an HTML dropbox link for?
The file I posted above will help with this. It has the same calculations in it.
It may have the same calculations, but it doesnât work with the overflow-y function in the way that I want it to. The way the âFixed-Background-Picture.hypeâ file was sent to me, the content was placed within the editor boundaries. When I moved some content below to the overflow area, it disappeared. Hansâ file worked with the file I provided. There were just a few minor issues that I can live with, but only the HTML link was provided, not the Hype file.
I posted a new one.
itâs accidently saved within beta. i can offer it when the new version is published.
have you tested @DBear 's file instead?
Yes, thatâs the one I tried and it didnât work with the overflow-y like the one you posted did. Any idea when the new version will be published?
@jonlangberg4896
I have posted 2 files in total fixedHeader.zip and fixedElements.zip
fixedElements.zip is a new file that the overflow-y works as well as a background fixed image and it runs a javascript function that calculates the heights (the same function as is used in the file that h_classen posted)
Please note that these are all hacks and that the new version of Hype should make this kind of use much easier to implement.
I canât get this to work with my file in the same way. Not sure what I am doing wrong, but here is the file before calculating the heights: Commercial-Page.hype.zip (634.7 KB)
If there is one problem that I must fix while still maintaining the overflow-y feature and the sticky header, it is fixing the scrollbar problem that I just found out about. Using the original method as shown in the linked file, when you click the top of the scrollbar when itâs flush with the top of the sticky menu, it cannot be selected, itâs somehow covering the scrollbar. When you try to grab onto it and drag the scrollbar down in the space where the menu is, the screen shifts to the left, leaving blank white space on the right. You can grab and drag the scrollbar if you click below the menu though.
Hi Jonathan
Here is a merger of your project and my document. I hope itâs ok. Still needs work for your needs but:
⢠fixed the scroll problem
⢠menu and background image are fixed position
⢠overflow is working (a little work needed here for the position of the content)
I have added a few things too 
Hope you like. Please donât break it 
Only kidding! Break away. Best way to learn!
fixedElementsv2.hype.zip (483.3 KB)