RESPONSIVE FULL-SCREEN BACKGROUND IMAGE

[{"selector":"#anim-a70423e1-a7b1-40e6-8f4d-020dfcf1a995","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-918bf1db-0696-4fd2-9dc8-dcf28a327f71","keyframes":{"transform":["translate3d(0px, -692.28427%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f3820878-de41-40c0-904b-0d44f0e28021","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b036057b-728c-479d-ae60-f47e811e4ff1","keyframes":{"transform":["rotate(-360deg) translate3d(0px, 181.42002%, 0) rotate(360deg)","rotate(-360deg) translate3d(0px, 0px, 0) rotate(360deg)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS

THE HTML

[{"selector":"#anim-31fa42de-cebd-4ebf-825a-7fa359486107","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both","iterations":1}]  <div id="back"></div>  <main id="front"> <p>CITY LIFE</p> </main>

BACKGROUND IMAGE CSS

[{"selector":"#anim-40987c2f-ec46-409a-9129-263e0673fdd7","keyframes":{"transform":["translate3d(-116.84211%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-20524338-09fc-4f14-8814-5b9942c00253","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1eab6d78-b619-49eb-a9a0-38a86d33c0b7","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] #back { z-index: 1; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: url("city.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; }

FOREROUND CONTENT CSS

[{"selector":"#anim-7991bc98-bc3d-4e93-a94b-bae1b0e4ba29","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c92468f2-b196-4791-af13-6c10d2118be2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e7c61083-5354-4257-90df-e8368a34a378","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] #front { z-index: 2; position: absolute; }

FULL TUTORIAL

[{"selector":"#anim-a8e26055-06b8-4673-b64f-ca6cbaab7050","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-37987bf6-cc5d-4e27-9447-e3cdc2e736ce","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-37a9845d-0fd2-430a-abc3-2abcc7216342","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}]

RESPONSIVE FULL-SCREEN BACKGROUND IMAGE

THE HTML

01

BACKGROUND IMAGE CSS

02

FOREROUND CONTENT CSS

03

FULL TUTORIAL

VISIT & FOLLOW

CODE BOXX YOUTUBE

CODE BOXX PINTEREST