Je veux ajouter une image animée ou gify (médecin traitant pateint) sur mon fond de site, quelqu'un peut-il s'il vous plaît me suggérer avec une solution, est un site unique page: http://bighealth.co.in/Vous voulez ajouter une image animée ou gify sur mon site Web fond
vous pouvez faire comme ceci:
background-size: cover; de modifier la façon dont vous souhaitez afficherbody{
background-image: url('https://www.nasa.gov/sites/default/files/thumbnails/image/dscovrepicmoontransitfull.gif');
/* background-size: cover; */
}ce ne sont pas en haute définition! besoin d'images animées ou gif haute définition, veuillez suggérer –
@IndradipPal êtes-vous ici pour demander du code ou demander un gif haute définition ??? google le gif que vous voulez et le remplacer dans l'url –
Si vous voulez animation « haute définition », vous devez ajouter de la vidéo en arrière-plan, si vous voulez dire cela, alors vous devez fournir la vidéo en 3 types (.mp4, .ogg (ou .ovg), WebM), en fait .mp4 pourrait être suffisant, mais ne fonctionne pas à 100% dans tous les brwosers, est de toute façon ici le 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>La source de ce code et plus description fournie ici: https://slicejack.com/fullscreen-html5-video-background-css/
Ce ne fonctionne pas pour vous? '
' –
heraldo
ce ne sont pas en haute définition! Vous aurez besoin d'images animées ou gif haute définition, veuillez suggérer –
Vous ne trouverez jamais une meilleure qualité que celle fournie par @ h3raldo, gif est limité par les couleurs et la résolution, une meilleure résolution et plus d'images signifient plus de taille et plus de lenteur expérience utilisateur. La vidéo de basse qualité pourrait être l'équilibre entre la qualité (car ce sera mieux que gif) et la taille de fichier –