想在我的網站後臺

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/