Background defilant

Fermé

redgush Messages postés 4 Date d'inscription lundi 3 août 2015 Statut Membre Dernière intervention 12 octobre 2015 - 11 oct. 2015 à 19:45
redgush Messages postés 4 Date d'inscription lundi 3 août 2015 Statut Membre Dernière intervention 12 octobre 2015 - 12 oct. 2015 à 17:22

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.

A voir également:

Background defilant
Background remover - Télécharger - Montage photo
Windows 7 logon background changer - Télécharger - Thèmes & Fonds d'écran
Windows 7 starter background changer - Télécharger - Thèmes & Fonds d'écran
Fond d'écran defilant samsung - Forum Samsung
Acer registration background task a cessé de fonctionner ✓ - Forum Virus

1 réponse

Réponse 1 / 1

Mirzo Messages postés 75 Date d'inscription mercredi 15 décembre 2010 Statut Membre Dernière intervention 14 octobre 2015 16
12 oct. 2015 à 13:52

Bonjour redgush,

Tu peux mettre des

div

à la place des balise

img

et appliquer un

background-image

sur 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 lundi 3 août 2015 Statut Membre Dernière intervention 12 octobre 2015
12 oct. 2015 à 17:22

Merci beaucoup Mirzo, ça fonctionne bien !

Discussions similaires

Task host windows, c'est quoi ?

Mon ordinateur est lent au démarrage

"gvrBackgroundWindow3" empêche W10 de redémarrer

probleme realtek hd audio driver

Défilement écran

Discussions similaires

Newsletters