28172 sujets

CSS et mise en forme, CSS3

[Résolu] Impossible de dupliquer une image dans un slider

Bonjour,
Je tente de dupliquer un background-image (via une classe : "imagasiat") dans un slider, mais l'image est inexistante dans la deuxième ancre Smiley hum .
Ci-dessous les CSS :
#imagasiat{
	bottom: 0;	
	margin-left: 0%;
	top: 0px;
	min-height: 100vh;
	position: absolute;
	z-index: 999999;
	border: 4vw solid #000000;
	-webkit-transition: -moz-transform .3s ease-out; 
   -moz-transition: -webkit-transform .3s ease-out; 
   -o-transition: -o-transform .3s ease-out; 
    transition: transform .3s ease-out; 
    background-image: "images/asiat.jpeg";
		  }
#imagasiat2{
	bottom: 0;	margin-left: 0%;
	top: 0px;
	min-height: 100vh;
	position: absolute;
	z-index: 999999;
	border: 4vw solid #000000;
	-webkit-transition: -moz-transform .3s ease-out; 
   -moz-transition: -webkit-transform .3s ease-out; 
   -o-transition: -o-transform .3s ease-out; 
    transition: transform .3s ease-out; 
    background-image: "images/asiat.jpeg";
		  }


.imagasiat{
background-position: center right;
background-size: contain;
background-repeat: no-repeat;
background-image: url("images/asiat.jpeg");}
			
.niveau1:hover + .niveau2 {	-webkit-transform: scale(2.5);
	-moz-transform: scale(2.5);
	-ms-transform: scale(2.5);
	-o-transform: scale(2.5);
	transform: scale(2.5);}

et le HTML :
	  <div id="content">

  <div class="fleche gauche">?</div>
  <div class="fleche droite">?</div>
    <div id="slide">
      <div id="ancre_1" class="article">
	
	  <ul id="textasiat" class="niveau1" "textasiat" "animClass">
    <li><a href="#">Ce lien sera</a></li>
     <li><a href="#">Ce lien sera</a></li>
     <li><a href="#">Ce lien sera</a></li>
     <li><a href="#">Ce lien sera</a></li>
	</ul>

  </div>
	<div id="imagasiat" class="niveau2 imagasiat"></div>
     <div id="ancre_2" class="article">
	 <ul id="textasiat" class="niveau1" "textasiat" "animClass">
     <li><a href="#">Ce lien sera</a></li>
     <li><a href="#">Ce lien sera</a></li>
     <li><a href="#">Ce lien sera</a></li>
     <li><a href="#">Ce lien sera</a></li>
	</ul>

  </div>
    <div id="imagasiat2" class="niveau2 imagasiat"></div>
      <div id="ancre_3" class="article">
        <p>Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.</p>
        <p>Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.</p>
        <p>A sed transitu piscatorios trucidarunt transitu vel cratibus parant manus.</p>
      </div>
      <div id="ancre_4" class="article">
        <p>Cibos vehementer vehementer solitarum quod propinquantis Isauri per solitarum quae.</p>
        <p>Et Valentiam dum Caesaris diu Valentiam suo septies oriens septies.</p>
        <p>Cibos vehementer vehementer solitarum quod propinquantis Isauri per solitarum quae.</p>
      </div>
    </div>
  </div>

Merci pour votre aide,
P.
Il manque le url( ) autour du chemin ici :
background-image: "images/asiat.jpeg";

=>
background-image: url("images/asiat.jpeg");

Je ne sais pas si c'est indispensable mais autant le mettre.
Modifié par kerlutinoec (10 Oct 2022 - 11:35)
Bonjour kerlutinoec;
Merci beaucoup pour ces précisions.
Ce n'était pas ça, j'ai passé des heures (sans dec) dessus.
J'ai réglé le prob il y a 10mn (sans dec).
J'ai opté pour une image source plutôt qu'une classe. J'ai du changé la classe.
Pour ceux que cela intéresse, le HTML :
      <div id="ancre_1" class="article">
	 <ul id="textasiat" class="niveau1" "textasiat" "animClass">
     <li><a href="#">Ce lien sera</a></li>
     <li><a href="#">Ce lien sera</a></li>
     <li><a href="#">Ce lien sera</a></li>
     <li><a href="#">Ce lien sera</a></li>
	</ul>

    <img class="niveau2 imagasiat" src="images/asiat.jpeg">  </div>
		
      <div id="ancre_1" class="article">
	 <ul id="textasiat" class="niveau1" "textasiat" "animClass">
     <li><a href="#">Ce lien sera</a></li>
     <li><a href="#">Ce lien sera</a></li>
     <li><a href="#">Ce lien sera</a></li>
     <li><a href="#">Ce lien sera</a></li>
	</ul>

    <img class="niveau2 " src="https://www.pierre-giraud.com/wp-content/uploads/2019/07/emoji-smile.png">  </div>

et la nouvelle classe (à retravailler) :
.imagasiat{
	right: 0;
	margin-left: 50%;
	width: 50%;
	position: relative;
	z-index: 9999;
	border: 6vw solid #000000;
	-webkit-transition: -moz-transform .3s ease-out; 
   -moz-transition: -webkit-transform .3s ease-out; 
   -o-transition: -o-transform .3s ease-out; 
    transition: transform .3s ease-out; 
}

Encre merci kerlutinoec (sans dec Smiley biggrin )
P.
Ça marche pour ton problème, mais ce que te dit Kelutinoec est à appliquer. Je vois que tu remets les class qui se suivent avec des "".
<ul id="textasiat" class="niveau1" "textasiat" "animClass">
Sujet clos
Aller à