Guest Posted June 2, 2020 Share Posted June 2, 2020 (edited) So I'm not even close to being adapt at coding but I'm trying to help a friend out with there website and they wanted to have this https://codepen.io/agoodwin/pen/NMJoER?editors=0100 as the site background on all pages and I'm having a hard time implementing it. I just wanted to know if this is even possible, I'm already biting off way more than I can chew with this alone. I'm using the brine template and could relly use some advice. I copied over the css and added it to Main also added in the photos to the site so it had there own url and such. Edited June 2, 2020 by C_Jack Link to comment
Solution tuanphan Posted June 3, 2020 Solution Share Posted June 3, 2020 It is SCSS, you need to convert to CSS. Add Code Block > Add this Codepen code <div class="background-container"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/moon2.png" alt=""> <div class="stars"></div> <div class="twinkling"></div> <div class="clouds"></div> <style> @keyframes move-background { from { -webkit-transform: translate3d(0px, 0px, 0px); } to { -webkit-transform: translate3d(1000px, 0px, 0px); } } @-webkit-keyframes move-background { from { -webkit-transform: translate3d(0px, 0px, 0px); } to { -webkit-transform: translate3d(1000px, 0px, 0px); } } @-moz-keyframes move-background { from { -webkit-transform: translate3d(0px, 0px, 0px); } to { -webkit-transform: translate3d(1000px, 0px, 0px); } } @-webkit-keyframes move-background { from { -webkit-transform: translate3d(0px, 0px, 0px); } to { -webkit-transform: translate3d(1000px, 0px, 0px); } } .background-container { position: fixed; top: 0; left: 0; bottom: 0; right: 0; } .stars { background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; z-index: 0; } .twinkling { width: 10000px; height: 100%; background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat; background-size: 1000px 1000px; position: absolute; right: 0; top: 0; bottom: 0; z-index: 2; -moz-animation: move-background 70s linear infinite; -ms-animation: move-background 70s linear infinite; -o-animation: move-background 70s linear infinite; -webkit-animation: move-background 70s linear infinite; animation: move-background 70s linear infinite; } .clouds { width: 10000px; height: 100%; background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat; background-size: 1000px 1000px; position: absolute; right: 0; top: 0; bottom: 0; z-index: 3; -moz-animation: move-background 150s linear infinite; -ms-animation: move-background 150s linear infinite; -o-animation: move-background 150s linear infinite; -webkit-animation: move-background 150s linear infinite; animation: move-background 150s linear infinite; } img { height: 70vh; width: 70vh; position: absolute; z-index: 3; right: 20px; } </style> DenaW 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Guest Posted June 3, 2020 Share Posted June 3, 2020 thanks a lot that is exactly what I needed didn't even know that code>block was a thing Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment