Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

Message par Guilde-Egregore Dim 21 Fév 2016, 01:53

Code:
<style>
body{
background-position:center bottom;
background-size: cover;
background-color: #000000;
background-image: url(http://i84.servimg.com/u/f84/18/73/48/08/blason11.png), url(http://i84.servimg.com/u/f84/18/73/48/08/sceau10.png);
background-repeat: no-repeat, no-reapeat;
}</style>

Coucou, j'ai besoin d'aide pour faire clignoter en fondu une image (le blason vert et jaune) dans une page html vierge et que cette image se positionne correctement par rapport au background (jardin).

J'ai essayé plusieurs choses mais je n'arrive pas.

Merci par avance.

Wink

Édition :

Je pense faire une image animée si la première idée ne trouve pas de solution seulement j'ai besoin de savoir comment faire pour superposer une image sur le background et qu'à toutes les résolutions l'image suit le même mouvement car je ne sais pas faire les images animées en fond transparent.


Dernière édition par Guilde-Egregore le Jeu 25 Fév 2016, 15:32, édité 1 fois
Guilde-Egregore

Guilde-Egregore
***

Masculin
Messages : 173
Inscrit(e) le : 26/05/2014

http://geleconnexion.guildmmorpg.com
Guilde-Egregore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

Message par Guilde-Egregore Lun 22 Fév 2016, 08:53

Coucou !

Up

Very Happy
Guilde-Egregore

Guilde-Egregore
***

Masculin
Messages : 173
Inscrit(e) le : 26/05/2014

http://geleconnexion.guildmmorpg.com
Guilde-Egregore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

Message par Guilde-Egregore Mar 23 Fév 2016, 08:48

J'ai trouvé un code pour faire clignoter l'image mais problème il ne fonctionne pas sur une page html qui ne contient pas le haut et le bas du forum (alors qu'il fonctionne sur les autres pages).

Aussi j'ai pensé à un moyen pour centrer l'image par rapport au background qui est la marge mais ça ne fonctionne pas bien car mon background est en cover et positionné center bottom.

Je souhaite vraiment trouver. Wink

Guilde-Egregore

Guilde-Egregore
***

Masculin
Messages : 173
Inscrit(e) le : 26/05/2014

http://geleconnexion.guildmmorpg.com
Guilde-Egregore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

Message par Guilde-Egregore Mer 24 Fév 2016, 13:06

Coucou !

Si vous ne comprenez pas ma demande je peux réexpliquer ? :/
Guilde-Egregore

Guilde-Egregore
***

Masculin
Messages : 173
Inscrit(e) le : 26/05/2014

http://geleconnexion.guildmmorpg.com
Guilde-Egregore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

Message par Scoubifitz Jeu 25 Fév 2016, 02:50

Bonsoir,

La page ne doit comporter qu'une image de fond et une image clignotante
Les deux doivent s'adapter à la résolution de l'écran ... c'est ça ?

Code:
<!DOCTYPE html>
<html>
<head>
<style>
body{
    background-position:center;
    background-size: cover;
    background-color: #000000;
    background-image: url(http://i84.servimg.com/u/f84/18/73/48/08/sceau10.png);
    background-repeat: no-repeat;
    }
img{
  width:100%;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite; color: red;
}

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0; }
    100% { opacity: 1.0; }
}
</style>
</head>
<body>
<img src="http://i84.servimg.com/u/f84/18/73/48/08/blason11.png" />
</body>
</html>
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

Message par Guilde-Egregore Jeu 25 Fév 2016, 09:27

Exactement ! Dans le mille merci ça va beaucoup m'aider pour la suite ! Smile

Je pensais à quelque chose sans barre de défilement verticale avec le background "center center" mais je ne vais pas être trop exigent non plus ! Et puis j'ignore si c'est possible !

J'ai trouvé le moyen d'ajouter un icon dans l'onglet mais pas le titre avec vous une idée ?

Merci à vous pour votre aide ! Smile
Guilde-Egregore

Guilde-Egregore
***

Masculin
Messages : 173
Inscrit(e) le : 26/05/2014

http://geleconnexion.guildmmorpg.com
Guilde-Egregore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

Message par Scoubifitz Jeu 25 Fév 2016, 14:30

En plaçant des balises title entre les balises head ...

Code:
<!DOCTYPE html>
<html>
<head>
<title>Lieu du Blason</title>
<link type="image/x-icon" rel="shortcut icon" href="http://i18.servimg.com/u/f18/18/73/48/08/110_1110.png" />
<style>
body{
    background-position:center center;
    background-size: cover;
    background-color: #000000;
    background-image: url(http://i84.servimg.com/u/f84/18/73/48/08/sceau10.png);
    background-repeat: no-repeat;
    }
img{
  width:100%;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite; color: red;
}
 
@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0; }
    100% { opacity: 1.0; }
}
 
@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0; }
    100% { opacity: 1.0; }
}
 
@keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0; }
    100% { opacity: 1.0; }
}
</style>
</head>
<body>
<img src="http://i84.servimg.com/u/f84/18/73/48/08/blason11.png" />
</body>
</html>
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

Message par Guilde-Egregore Jeu 25 Fév 2016, 15:31

Merci à vous Scoubifitz cela me convient ! Smile

Bon après-midi !
Guilde-Egregore

Guilde-Egregore
***

Masculin
Messages : 173
Inscrit(e) le : 26/05/2014

http://geleconnexion.guildmmorpg.com
Guilde-Egregore a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum