Le changement du background en javascript annule mes style css
Résolu
Boulang
-
Boulang -
Boulang -
Bonjour,
je débute en javascript, je fais appel à vous car j'ai un petit problème que mon titre résume bien.
J'ai mon element avec un id "pressadeSlider":
pressadeSlider posséde des styles propres dans un doc css à part:
grâce au javascript je souhaite assigner une image au background de "pressadeSlider" comme ceci à la fin de mon code HTML:
l'image se charge bien cependant, mes styles css ne sont plus appliqués et je n'arrive pas à les remettre...
si vous avez une solution, je vous serais reconnaissante à jamais! ;)
je débute en javascript, je fais appel à vous car j'ai un petit problème que mon titre résume bien.
J'ai mon element avec un id "pressadeSlider":
<div id="slideshow">
<div id="mask">
<ul class="image_container" id="pressadeSlider">
<li id="slideimg-1"></li>
<li id="slideimg-2"></li>
<li id="slideimg-3"></li>
<li id="slideimg-4"></li>
</ul>
</div>
pressadeSlider posséde des styles propres dans un doc css à part:
#pressadeSlider{
width:100%;
height:100%;
margin:0;
padding:0;
background-size:cover;
}
grâce au javascript je souhaite assigner une image au background de "pressadeSlider" comme ceci à la fin de mon code HTML:
document.getElementById("pressadeSlider").style.background = "url(../../IMAGEPORTFOLIO/TRAVAUX/jpg%20pressade/PRESSADE_SPRITE.jpg) no-repeat";
l'image se charge bien cependant, mes styles css ne sont plus appliqués et je n'arrive pas à les remettre...
si vous avez une solution, je vous serais reconnaissante à jamais! ;)
1 réponse
-
Salut,
La propriété background te permet de définir 8 propriétés différentes (background-image, background-size, background-position, etc...).
Si tu veux conserver le style initial appliqué à cette div, le plus simple étant de ne modifier que la propriété dont tu as besoin.document.getElementById("pressadeSlider").style.backgroundImage = "url(../../IMAGEPORTFOLIO/TRAVAUX/jpg%20pressade/PRESSADE_SPRITE.jpg)"; document.getElementById("pressadeSlider").style.backgroundRepeat = "no-repeat";
Plus d'info : https://www.w3schools.com/jsref/prop_style_background.asp
Bonne journée
