想在我的网站后台

Question

我想在我的网站添加背景动画或gify图像（医生治疗pateint）添加动画或gify形象，任何人都可以请建议我一些解决方案，它的单页网站：http://bighealth.co.in/

Answer 1

，你可以这样做：

1. 更改URL的GIF你想
2. 变化background-size: cover;修改要显示

方式

body{ 
 
    background-image: url('https://www.nasa.gov/sites/default/files/thumbnails/image/dscovrepicmoontransitfull.gif'); 
 
    /* background-size: cover; */ 
 
}

Answer 2

如果你想“高清”的动画，你需要添加视频作为背景，如果你的意思是这样，那么你需要提供视频3种类型（.MP4，.OGG （或.ovg），WEBM），实际上.MP4可能是足够的，但在所有brwosers将无法正常工作100％，反正这里是代码：

.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>

（点击整版版看代码运行良好，如果运行代码片段在这里没有工作，或访问 original source here）

此代码，更说明来源此处提供：https://slicejack.com/fullscreen-html5-video-background-css/