Gif as page background

Developer
António Capelo
Size
3,521 Kb
Views
12,144
  1. Gif as page background Previews
  2. Gif as page background HTML Codes
  3. Gif as page background CSS Codes

How do I make an gif as page background?

What is a gif as page background? How do you make a gif as page background? This script and codes were developed by António Capelo on 15 December 2022, Thursday.

Gif as page background Previews
IQ Test

Gif as page background - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>gif as page background</title> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="">
</div>
<div class="content">	<h1 style="color:#44A7E4;font-size: 2.5em;">Using a gif as the page background is pretty easy ... if you don't need to scroll.</h1> <p>Basically, one sets up the html or body with the normal stuff: <ul><li>background: url(url_to_gif) no-repeat center center fixed;</li>
<li>background-size: cover;</li>	<li>height: 100%;</li><li>	overflow: hidden;</li></ul></p> <p>and for the <b>body</b><ul><li>height:100%;</li><li>overflow: scroll;</li><li>-webkit-overflow-scrolling: touch;</li><li>background: transparent;</li>
</ul></p> <p>(Problem: when scrolling, on chrome, the gif freezes)</p> <h1 style="font-size: 2.5em;"><span style="color:#E4BE44;">Plus</span>, as pointed out on <a href="hhttps://medium.com/@glenmaddern/css-filters-gifs-and-performance-4364221d6d97">@glenmaddern's post</a>, we can achieve it by using with a reduced size, then scale it back up. That technique doesn't work well on the body, scaling it's content, so we have to use a div instead. This enables the use of the css filters on the gif, which is cool, and you can see a pen <a href="https://codepen.io/capelo/full/tiCnF/">here</a>.</h1>
<ul> <li>position: absolute;</li> <li>top: 0;</li> <li>width: 20%;</li> <li>height: 20%;</li> <li>z-index:-1;</li> <li>background-image: url(url_to_gif)</li> <li>background-size: cover;</li> <li>background-repeat: no-repeat;</li> <li>background-position: center center</li> <li>-webkit-filter: blur(1px) grayscale(0.1) brightness(1.0);</li> <li>transform-origin: top left;</li> <li>transform: scale(5);</li>
</ul> <h2 style="font-size:2.5em"><span style="color:#E4BE44">However</span>, this works well on desktops with the scroll disabled. If we enable it, there's a blank space as soon as you have to scroll :( </h2> <p>The gif on the background is from the great	<a href="http://www.imdb.com/title/tt0105236/">Reservoir Dogs</a>, fetched from <a href="https://iwdrm.tumblr.com/">If we don't, remember me</a> blog.</p>
</div>
</body>
</html>

Gif as page background - Script Codes CSS Codes

* { font-family: 'Source Sans Pro', sans-serif;
}
body { height: 100%; overflow: scroll; -webkit-overflow-scrolling: touch; background: transparent;
}
.background { position: absolute; top: 0; left: 0; width: 20%; height: 20%; -webkit-transform: scale(5); z-index: -1; background-image: url("https://31.media.tumblr.com/316408fc4283f9e5375fe9b7a7e141ed/tumblr_mwgtxdL3b81qe0eclo1_500.gif"); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; -webkit-transform-origin: top left; -moz-transform-origin: top left; transform-origin: top left; overflow: scroll;
}
html { z-index: -1; background-image: url("https://31.media.tumblr.com/316408fc4283f9e5375fe9b7a7e141ed/tumblr_mwgtxdL3b81qe0eclo1_500.gif"); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; -webkit-transform-origin: top left; -moz-transform-origin: top left; transform-origin: top left; overflow: scroll; -webkit-overflow-scrolling: touch;
}
li { margin-bottom: 10px;
}
.content { color: ghostwhite; letter-spacing: 2px; padding: 50px 10px;
}
a, a:hover { color: #44A7E4;
}
p { font-size: 1.2em;
}
Gif as page background - Script Codes
Gif as page background - Script Codes
Home Page Home
Developer António Capelo
Username capelo
Uploaded December 15, 2022
Rating 3
Size 3,521 Kb
Views 12,144
Do you need developer help for Gif as page background?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

António Capelo (capelo) Script Codes
Name
Full-width slider.
8-Bit Avatar
Clock loading
Custom checkbox example
Menu with following underline
Room
Analog Clock
React Boilerplate
Brainerd scroller
ToDo
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!