Parrallax Effect Banner

Tags: effect, title, cool, banner

Description:

Hey! I'm new to this site and I wanted to contribute a little bit. This is something cool I learned in my middle school coding class. It's called a "Parrallax" effect. What it does is it keeps an image in place while you scroll down. It's pretty cool. If you wan't to change out the image feel free. Just go into the code and switch out the URL. Example: background-image: url('INSERT URL HERE'); I singled out the tag so it should be easier to see. Fair warning tho, I am an ameteur coder and it might squish or format an image in a way you don't want. If that ends up being the case you can change the background size of the image. Example: background-size: 100px 100px; or background-size: 100% 100px; or background-size: 100% 100%; It is important to note that is it WIDTH and then HEIGHT.

Preview:

Code:

<!-- (c) Layout created by Nercrotix (https://layouts.spacehey.com/layout?id=90967) --> <style> /* Nerco was here */ main:before { display: block; content: ""; background-image: url('https://steamuserimages-a.akamaihd.net/ugc/789735677062533292/BDE9F3FEDA78CC0D4FD70B6A20FFD0602C41283E/?imw=637&imh=358&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true'); background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; height: 600px; /* Nerco was here */ } </style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.