Hi all, I am new here. I am trying to recreate the image effect found on oysterbooks.com. As you may notice, when you visit the site it will present a large image in the background that takes up the whole window, however when you scroll down it reveals other content. I am trying to recreate that same effect. I tried to play around with the code and noticed something weird in the coding. If you take away the "data-is-hero data-is-home" part of the html tag then the image isn't full screen anymore... what is this? I read that the data- attribute doesn't effect layout but this does... how? If you can please send me a sample of the layout effect recreated, that would be much appreciated. Thank you for taking the time to help me out. Cheers, Savion
You can get the same effect on various ways. You could simply create a div and make it fixed to the top, left and right side and add the image as background image. On top of that you can create the other buttons as well. Once you scroll down the images stays in place and does not scroll with you. You could also catch the screen width and height with Javascript and make the image always fit perfectly, whether it be on mobile phone or pc. If you need the code, just let me know! Good luck! Websprank.com
My question would be why do you want to crap all over your website with some massive bandwidth wasting memory chewing image that even worse needs scripttardery to even function that has no business on a website as a background in the first place? Do yourself (and visitors to your site) a favor and don't... just DON'T... The only reason to pull those types of stupid stunts is to make it either harder for users to get at the data, or to cover up for a lack of anything meaningful on the site.