Want to add animated or gify image on my website background - css

Question

I want to add animated or gify image(Doctor treating pateint) on my website background, can anyone please suggest me with some solution, its a single page website: http://bighealth.co.in/

Answer 1

you can do like this:
change the url to the gif you want
change background-size: cover; to modify the way you want to display
body{
background-image: url('https://www.nasa.gov/sites/default/files/thumbnails/image/dscovrepicmoontransitfull.gif');
/* background-size: cover; */
}

Answer 2

If you want "high definition" animation, you need to add video as a background, if you mean this, then you need to provide the video in 3 types (.mp4, .ogg (or .ovg), webm), actually .mp4 could be enough, but will not work 100% in all brwosers, anyway here is the code:
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
height: 300%;
top: -100%;
}
}
#media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 300%;
left: -100%;
}
}
#media (max-width: 767px) {
.fullscreen-bg {
background: url('../img/videoframe.jpg') center center / cover no-repeat;
}
.fullscreen-bg__video {
display: none;
}
}
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="http://dev2.slicejack.com/fullscreen-video-demo/video/big_buck_bunny.mp4" type="video/mp4">
<source src="http://dev2.slicejack.com/fullscreen-video-demo/video/big_buck_bunny.ogv" type="video/ogg">
<source src="http://dev2.slicejack.com/fullscreen-video-demo/video/big_buck_bunny.webm" type="video/webm">
</video>
</div>
<div class="content">
<h1>Full screen HTML5 video background</h1>
<p>Lorem ipsum dolor sit amet, vix te quidam commodo placerat. Mei ne dicunt minimum disputationi, purto everti adolescens id cum, quis veritus cotidieque eum ex. Ea eirmod atomorum posidonium sed, splendide dissentiunt an mel. Dolorem suavitate voluptatibus pro no. No duo conceptam cotidieque.</p>
<p>Pro novum argumentum ad. Vix at inani civibus, congue veritus probatus ad vel. Eam ne quis omnesque euripidis, pri ea dicat etiam ponderum. At sit harum dolor persius, eos vocent adipisci ad, magna movet audiam pri no. Erant labores incorrupte id sit, constituto scripserit theophrastus quo no.</p>
<p>Nam tacimates laboramus cu. Graeco tritani mel no. Iriure constituam mea te, quo integre salutatus ne. Case tota dicam te eam, quis minim assentior ei cum, sea eu verterem liberavisse. Modus officiis fabellas ea eos, in vis omittam ocurreret. Ea labitur assentior vix.</p>
<p>Case tation integre sit an. Te cum mollis vocent similique, docendi volumus eu nam. Erant euismod partiendo nec ei. Vel malorum liberavisse cu. Fabulas efficiantur in duo.</p>
<p>Ad qui brute fabulas rationibus, ex virtute omnesque vituperata vix. Ne case verterem probatus sit. In eam nulla tation debitis, has te alterum equidem definiebas. At summo facilisis eum. Vel ad nostro discere oportere, ad quod vitae officiis quo.</p>
<p>Case tation integre sit an. Te cum mollis vocent similique, docendi volumus eu nam. Erant euismod partiendo nec ei. Vel malorum liberavisse cu. Fabulas efficiantur in duo.Ad qui brute fabulas rationibus, ex virtute omnesque vituperata vix. Ne case verterem probatus sit. In eam nulla tation debitis, has te alterum equidem definiebas. At summo facilisis eum. Vel ad nostro discere oportere, ad quod vitae officiis quo.</p>
</div>
(click full page version to see the code running well, if run snippet not worked here, or visit the original source here)
The source of this code and more description provided here: https://slicejack.com/fullscreen-html5-video-background-css/