Background defilant
redgush
Messages postés
4
Date d'inscription
Statut
Membre
Dernière intervention
-
redgush Messages postés 4 Date d'inscription Statut Membre Dernière intervention -
redgush Messages postés 4 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai crée un défilement (en fondu) de 4 images de dimensions 500x500px, mais j'aimerais faire en sorte que ces images se transforment en images de fond (en background), qu'elles s'adaptent donc à la taille de l'écran, que faut-il changer dans mon code ? Voici mon code:
<html>
<head>
<style>
@-webkit-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@-moz-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@-o-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#cf4a {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf4a img {
position:absolute;
left:0;
}
#cf4a img {
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 60s;
-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 60s;
-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 60s;
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 60s;
}
#cf4a img:nth-of-type(1) {
-webkit-animation-delay: 45s;
-moz-animation-delay: 45s;
-o-animation-delay: 45s;
animation-delay: 45s;
}
#cf4a img:nth-of-type(2) {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
animation-delay: 30s;
}
#cf4a img:nth-of-type(3) {
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-o-animation-delay: 15s;
animation-delay: 15s;
}
#cf4a img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
</style>
</head>
<body>
<div id="cf4a" class="shadow">
<img src="https://upload.wikimedia.org/wikipedia/en/c/cd/The-catalyst-single-cover-500x500.png">
<img src="http://www.asianmasters.com.sg/2013/images/AM2013/AM%20Feb%20Event_500x500px.jpg">
<img src="https://gunnar.com/wp-content/uploads/2014/02/cod-mw3-lan-event-500x500.jpg">
<img src="https://www.dbq.edu/media/Alumni/Twins.jpg">
</div>
</body>
</html>
Donc je répète, ce code permet bien de faire défiler ces 4 images, mais j'aimerais que celles-ci soient des images de fond. J'ai essayé de placer des "body background" entre ma div, mais ça ne fonctionne pas, quelqu'un pourrait-il m'aider s'il vous plait ?
Merci de votre aide.
J'ai crée un défilement (en fondu) de 4 images de dimensions 500x500px, mais j'aimerais faire en sorte que ces images se transforment en images de fond (en background), qu'elles s'adaptent donc à la taille de l'écran, que faut-il changer dans mon code ? Voici mon code:
<html>
<head>
<style>
@-webkit-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@-moz-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@-o-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#cf4a {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf4a img {
position:absolute;
left:0;
}
#cf4a img {
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 60s;
-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 60s;
-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 60s;
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 60s;
}
#cf4a img:nth-of-type(1) {
-webkit-animation-delay: 45s;
-moz-animation-delay: 45s;
-o-animation-delay: 45s;
animation-delay: 45s;
}
#cf4a img:nth-of-type(2) {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
animation-delay: 30s;
}
#cf4a img:nth-of-type(3) {
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-o-animation-delay: 15s;
animation-delay: 15s;
}
#cf4a img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
</style>
</head>
<body>
<div id="cf4a" class="shadow">
<img src="https://upload.wikimedia.org/wikipedia/en/c/cd/The-catalyst-single-cover-500x500.png">
<img src="http://www.asianmasters.com.sg/2013/images/AM2013/AM%20Feb%20Event_500x500px.jpg">
<img src="https://gunnar.com/wp-content/uploads/2014/02/cod-mw3-lan-event-500x500.jpg">
<img src="https://www.dbq.edu/media/Alumni/Twins.jpg">
</div>
</body>
</html>
Donc je répète, ce code permet bien de faire défiler ces 4 images, mais j'aimerais que celles-ci soient des images de fond. J'ai essayé de placer des "body background" entre ma div, mais ça ne fonctionne pas, quelqu'un pourrait-il m'aider s'il vous plait ?
Merci de votre aide.
A voir également:
- Background defilant
- Windows 7 logon background changer - Télécharger - Thèmes & Fonds d'écran
- Starter background changer - Télécharger - Thèmes & Fonds d'écran
- John's background switcher - Télécharger - Suite bureautique
- Realtek audio background process class ✓ - Forum Pilotes (drivers)
- Background color css ✓ - Forum CSS
1 réponse
Bonjour redgush,
Tu peux mettre des
Je m'explique avec un exemple :
Il suffit ensuite d'adapter ton css avec le code html ci-dessus. N'oublie pas de définir une hauteur (et accessoirement une largeur) à tes div ayant le background.
J'espère avoir répondu à ta question correctement.
--
Tu peux mettre des
divà la place des balise
imget appliquer un
background-imagesur ces
div.
Je m'explique avec un exemple :
<html>
<body>
<div id="cf4a" class="shadow">
<div class="item" style="background-image: url(url_image1);">
</div>
<div class="item" style="background-image: url(url_image2);">
</div>
...
</div>
</body>
</html>
Il suffit ensuite d'adapter ton css avec le code html ci-dessus. N'oublie pas de définir une hauteur (et accessoirement une largeur) à tes div ayant le background.
J'espère avoir répondu à ta question correctement.
--
redgush
Messages postés
4
Date d'inscription
Statut
Membre
Dernière intervention
Merci beaucoup Mirzo, ça fonctionne bien !