28114 sujets

CSS et mise en forme, CSS3

Bonjour,
Je m'entête, je m'entête depuis des heures mais là je ne vois plus rien.
Sans doute un soucis de positionnement.
Sous ma barre de navigation, je voudrais une construction un peu spéciale.


<section class="wrapper bg-dark">
<div class="container pt-7 pt-md-5 pb-8">
<div class="row gx-0 gy-10 align-items-left">
<div class="col-lg-4 mb-n18" data-cues="slideInDown">
<div class="position-relative">
<figure><img src="images/effet-texture.png" srcset="images/effet-texture.png" alt=""></figure>
<figure><img src="images/animLA.gif"  style="width:450px; margin-top: -550px; z-index:300;" alt=""></figure>
</div>
<!-- /div -->
</div>
<!-- /colonne -->
<div class="col-lg-6" data-cues="slideInDown" data-group="page-title" data-delay="600">
<h1 class="display-1 text-white mb-4">LOREM IMSUM <br /><span class="typer text-primary text-nowrap" data-delay="100" data-words="message 1, message2, message3"></span><span class="cursor text-primary" data-owner="typer"></span></h1>
<p class="lead fs-24 lh-sm text-white mb-7 pe-md-18 pe-lg-0 pe-xxl-15">une autre phrase.</p>
</div>
<!-- /colonne -->  
</div>
<!-- /.rang -->
</div>
<!-- /.contenant -->
</section>


Avec la section fd noir tout est bien placé.

Dés que je veux ajouter un background-image , cela ne marche plus. je précise que cette image est un bandeau défilant.


<div class="wrapper border-0 overflow-hidden m-0 p-0 top-0 left-0 right-0 bottom-0 animated kenBurnsToRight" style="position:relative; animation-delay: 600ms;background-image: url(images/bandeau.jpg); background-position: center right; animation-duration: 30s;"


Je crois que j'ai tout essayé. Si je le code dans le wrapper principal, il défile mais tout défile avec ce que j'arrive à comprendre.
J'aimerai parvenir à ce que lui seul défile et que mon container reste fixe.

Merci de vos éclairages.
Smiley confused

Smiley rolleyes