Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript Background-image

Background-image

2 réponses
Avatar
Guy
Bonjour,
j'ai une image en arrière plan(style et CSS).
Comment puis je changer ses propriétés (position ...) ?
merci
G
Signaler un problème avec ce contenu

2 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
SAM
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 :
<http://www.yoyodesign.org/doc/w3c/css2/colors.html#q2>

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
Avatar
Guy
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 :
<http://www.yoyodesign.org/doc/w3c/css2/colors.html#q2>

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>