cassourel d'image de fond

27 juillet 2017 à 16:38:58

salut les amis

veuillez bien m'aider a corriger

c'est un tuto que j'ai reproduit mais cela ne marche pas

le html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>diaporama</title>
		<link href="sty/style.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
		<h1> Diaporama avec backgr </h1>
		<div class="diapo1"> </div>
	</body>
</html>

le css

body{
margin:auto;
padding:auto;
width:1000px;
background-color:#999;
}
.diapo1{
	width:800px;
	height:400px;
	border:3px #000 solid;
	background-image: url(../image/1.jpg);
	
	moz-animation-name: diapo;
	moz-animation-duration: 10s;
	moz-animation-timing-function: linear;
	moz-animation-iteration-count: infinite;	
	moz-animation-direction: normal;
	
	webkit-animation-name: diapo;
	webkit-animation-duration: 10s;
	webkit-animation-timing-function: linear;
	webkit-animation-iteration-count: infinite;	
	webkit-animation-direction: normal;
	
	animation-name: diapo;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;	
	animation-direction: normal;
}
@-moz-keyframes diapo{
		0%{background-image: url(../image/1.jpg);}
		20%{background-image: url(../image/2.jpg);}
		40%{background-image: url(../image/3.jpg);}
		60%{background-image: url(../image/4.jpg);}
		80%{background-image: url(../image/5.jpg);}
		100%{background-image: url(../image/1.jpg);}	
}
@-webkit-keyframes diapo{
		0%{background-image}: url(../image/1.jpg);}
		20%{background-image}: url(../image/2.jpg);}
		40%{background-image}: url(../image/3.jpg);}
		60%{background-image}: url(../image/4.jpg);}
		80%{background-image}: url(../image/5.jpg);}
		100%{background-image}: url(../image/1.jpg);}	
		}
@keyframes diapo{
		0%{background-image: url(../image/1.jpg);}
		20%{background-image: url(../image/2.jpg);}
		40%{background-image: url(../image/3.jpg);}
		60%{background-image: url(../image/4.jpg);}
		80%{background-image: url(../image/5.jpg);}
		100%{background-image: url(../image/1.jpg);}	
		}

merci de m'aider

Golden Panda

28 juillet 2017 à 10:56:18

Salut,

On peux t'aider mais pas faire ton travail à ta place, c'est quoi le problème ? Ca veux dire quoi 'ca ne marche pas' ?

H2R file comme l'air

28 juillet 2017 à 14:32:08 - Message modéré pour le motif suivant : Les insultes ne sont pas tolérées

La H2R file comme le vent , fume plus que le feu , arrache la terre , n'a pas besoin d'eau à part de l'essence mdr

Lauloque

28 juillet 2017 à 15:16:52

C'était nécessaire d'écrire ça ?

Les insultes ne sont pas tolérées sur ce forum, merci de rester poli et courtois.

-
Edité par Lauloque 28 juillet 2017 à 15:17:48

Moderateur forum || FAQ 3D || discord 3D francophone || OC Tweak script

H2R file comme l'air

28 juillet 2017 à 15:21:48

La H2R file comme le vent , fume plus que le feu , arrache la terre , n'a pas besoin d'eau à part de l'essence mdr

Benjamin1206

29 juillet 2017 à 16:12:27

bonsoir les amis. mon problème est que les images ne bougent pas. j'attends votre apport. Merci

H2R file comme l'air

29 juillet 2017 à 16:39:00

Benjamin1206 essaie ca

body{
margin:auto;
padding:auto;
width:1000px;
background-color:#999;
}
.diapo1{
    width:800px;
    height:400px;
    border:3px #000 solid;
    background-image: url(../image/1.jpg);
    moz-animation-name: diapo;
    moz-animation-duration: 10s;
    moz-animation-timing-function: linear;
    moz-animation-iteration-count: infinite;   
    moz-animation-direction: normal;
     
    webkit-animation-name: diapo;
    webkit-animation-duration: 10s;
    webkit-animation-timing-function: linear;
    webkit-animation-iteration-count: infinite;
    webkit-animation-direction: normal;
     
    animation-name: diapo;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;   
    animation-direction: normal;
}
@-moz-keyframes diapo{
        0%{background-image: url("../image/1.jpg");}
        20%{background-image: url("../image/2.jpg");}
        40%{background-image: url("../image/3.jpg");}
        60%{background-image: url("../image/4.jpg");}
        80%{background-image: url("../image/5.jpg");}
        100%{background-image: url("../image/1.jpg");}   
}
@-webkit-keyframes diapo{
        0%{background-image: url("../image/1.jpg");}
        20%{background-image: url("../image/2.jpg");}
        40%{background-image: url("../image/3.jpg");}
        60%{background-image: url("../image/4.jpg");}
        80%{background-image: url("../image/5.jpg");}
        100%{background-image: url("../image/1.jpg");}  
}
@keyframes diapo{
        0%{background-image: url("../image/1.jpg");}
        20%{background-image: url("../image/2.jpg");}
        40%{background-image: url("../image/3.jpg");}
        60%{background-image: url("../image/4.jpg");}
        80%{background-image: url("../image/5.jpg");}
        100%{background-image: url("../image/1.jpg");}   
}

La H2R file comme le vent , fume plus que le feu , arrache la terre , n'a pas besoin d'eau à part de l'essence mdr

Benjamin1206

2 août 2017 à 13:37:25

Merci Mr H2R file comme l'air

le code marche maintenant mais la transition entre les image est trop brusque je veux cela soit un peu doux.

Lauloque

3 août 2017 à 3:42:26

On n'est pas sensé te donner du code sur mesure. C'est à toi de chercher. Renseignes-toi sur les transitions CSS.

Moderateur forum || FAQ 3D || discord 3D francophone || OC Tweak script

me_moi

3 août 2017 à 7:00:40

@keyframes : http://caniuse.com/#search=%40keyframes

animation : http://caniuse.com/#search=Animation-

Il n'est plus nécessaire de mettre des préfixes pour navigateurs. Tu n'as donc qu'à écrire chaque règle une seule fois.

Benjamin1206

3 août 2017 à 19:19:17

merci pour votre soutien.

Benjamin1206

8 août 2017 à 16:25:41

salut les amis je suis toujours a la recherche de l'aide.

aidez moi a avoir un slid de cette page : http://www.myhome-solar.com/

Je vous remercie d'avance