Background-image

Le
Guy
Bonjour,
j'ai une image en arrière plan(style et CSS).
Comment puis je changer ses propriétés (position ) ?
merci
G
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #7034661
Guy a écrit :
Bonjour,
j'ai une image en arrière plan(style et CSS).
Comment puis je changer ses propriétés (position ...) ?



CSS :
==== body { background: url(img.jpg) no-repeat center center white; }
.ctrBack { background-position: center center }
.ctrHautBack { background-position: top center }
.ctrBasBack { background-position: bottom center }
.hauGcheBack { background-position: top left }


JS :
=== function changeBackImage(position) {
document.body.className = position;
}


<a href="javascript:changeBackImage('ctrHautBack')">centrée en haut</a>
<a href="javascript:changeBackImage('hauGcheBack')">en haut gauche</a>

ou sans fonction :

<a href=#"
onclick="document.body.className='ctrBasBack';
return false;">centrée en bas</a>

ou sans classe :

<a href="#"
onclick="document.body.style.backgroundPosition='top right';
return false;">en haut droite</a>


Voir :

en JS, background-repeat se dit : backgroundRepeat

exemple :

<a href="#"
onclick="
document.body.style.backgroundImage = 'url(truc.gif)';
document.body.style.backgroundPosition = '50px top';
document.body.style.backgroundRepeat = 'repeat-y';
return false;">
une bande verticale à 50px du bord</a>


--
sm
Guy
Le #7038631
Merci

SAM a écrit :
Guy a écrit :

Bonjour,
j'ai une image en arrière plan(style et CSS).
Comment puis je changer ses propriétés (position ...) ?




CSS :
==== > body { background: url(img.jpg) no-repeat center center white; }
.ctrBack { background-position: center center }
.ctrHautBack { background-position: top center }
.ctrBasBack { background-position: bottom center }
.hauGcheBack { background-position: top left }


JS :
=== > function changeBackImage(position) {
document.body.className = position;
}


<a href="javascript:changeBackImage('ctrHautBack')">centrée en haut</a>
<a href="javascript:changeBackImage('hauGcheBack')">en haut gauche</a>

ou sans fonction :

<a href=#"
onclick="document.body.className='ctrBasBack';
return false;">centrée en bas</a>

ou sans classe :

<a href="#"
onclick="document.body.style.backgroundPosition='top right';
return false;">en haut droite</a>


Voir :

en JS, background-repeat se dit : backgroundRepeat

exemple :

<a href="#"
onclick="
document.body.style.backgroundImage = 'url(truc.gif)';
document.body.style.backgroundPosition = '50px top';
document.body.style.backgroundRepeat = 'repeat-y';
return false;">
une bande verticale à 50px du bord</a>




Publicité
Poster une réponse
Anonyme