[Résolu] Mettre une image en cover dans une classe (prob media queries

A tous les coups c'est les guillemets bizarres de ton premier bloc
‘../images/1920w/PBal.jpg’
(pas identiques en début et en fin, genre guillemets typographiques anglais)

Bonjour kerlutinoec
Bien vu !
Mais ce n'est pas ça malgré un code valide maintenant

@media only screen and (min-width: 576px) and (max-width: 768px)
{
.lddc .bg-img-1 {
	{
		background-image: url('../images/960w/PBal.jpg');
	}

.lddc .bg-img-2
	{
		background-image: url('../images/960w/PBal1.jpg');
	}

.lddc .bg-img-3
	{
		background-image: url('../images/960w/PBal1.jpg');
}
.lddc .bg-img-4
	{
		background-image: url('../images/960w/PBal1.jpg');
	}
.lddc .bg-img-5 {
		background-image: url('../images/960w/PBal1.jpg');
}
}

Merci et bonne journée,
P.
Modifié par PLGPPUR (30 Sep 2022 - 12:06)

Bonjour,
effectivement, on ne peut pas panacher les guillemets.
La class bg-img dans le html, que fait-elle ? Ça fonctionne avec le css et là, elle n'y est pas. Et tu as ajouté la class lddc, y compris dans ton nouvel exemple.
Le html complet, au moins pour les images, serait le bienvenu.
Je vois que tu as fermé }} .bg-img-5, qui ne l'était pas sur le premier code.

Regarde bien tes accolades autour de :

.lddc .bg-img-1 {
	{ /* il n'y a pas un problème là ? */
		background-image: url('../images/960w/PBal.jpg');
	}
/* ... */

De manière générale, il faut toujours décomposer un problème. Dans ce cas présent tu aurais dû tester sans media-queries, puis avec. Ça t'aurait permis de voir le problème déjà sans le media querie.

Bonjour Bongota,
Voici les CSS de lddc et bg-img :

.lddc .sl-slider-wrapper {
	width: 100%;
	height: 650px;
	overflow: hidden;
	position: relative;
	left: 0px;
	margin: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
}

.lddc .sl-slider h2,
.lddc .sl-slider blockquote {
	padding: 300px 30px 10px;
	width: 80%;
	max-width: 960px;
	color: #fff;
	margin: 0 auto;
	position: relative;
	z-index: 100;
	text-align: center;
}

.lddc .sl-slider h2,
.lddc .sl-slider {
	font-family: 'Holtwood One SC';
	}


.lddc .sl-slider h3 {
	width: 100%;
	color: #fff;
	margin: 0 auto;
	position: relative;
	z-index: 100;
	text-align: center;
	font-size: 10vw;

}

	
.lddc .sl-slider h2 {
	font-size: 100px;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}

.lddc .sl-slider blockquote {
	padding-top: 10px;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
	font: 300 28px Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}

.lddc .sl-slider blockquote cite {
	font-size: 16px;
	font-weight: 700;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 5px;
	padding-top: 30px;
	display: inline-block;
}

.lddc .bg-img {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	height: 100vh !important;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
		background-color: black;

}
/* Media Queries for custom slider */

	.lddc .sl-slider-wrapper {
	height: 800px;
	position: relative;
	top: 0px;
	}

	.lddc .sl-slider h2 {
		font-size: 36px;
	}

	.lddc .sl-slider blockquote {
		font-size: 16px;
	}

le html :

        <div class="container">

            <header class="lddc">

            
<div id="logo"><img src="images/logoblanc_cut.gif"  alt="" class="lddc logo"/></div>
<div id="slider" class="sl-slider-wrapper">

<div id="menu" class="navbar navbar-default navbar-fixed-top">
  <ul class="nav">
            <li><a href="#test">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Contact</a></li>
    </ul>
    </div>

	<div class="sl-slider" data-midnight="white">
				
					<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
<div class="bg-img bg-img-1">
<h2>Regula aurea.</h2>
</div>
						</div>

						
			  </div>
					
	<div class="sl-slide" data-orientation="vertical"
				
					<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
<div class="bg-img bg-img-2">
<video autoplay loop muted="" playsinline="">
    <source src="./videos/levres.webm"
            type="videos/webm">

    <source src="./videos/levres.mp4"
            type="video/mp4">
</video></div>		<h3>Titre
							<div class="marquee-rtl">    <!-- le contenu défilant -->
    <div>LeDav</div></h3>
						</div>
			  </div>
					
					<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
<div class="bg-img bg-img-3">
<video autoplay loop muted="" playsinline="">
    <source src="./lddc.webm"
            type="video/webm">

    <source src="./videos/lddc.mp4"
            type="video/mp4">
</video></div>		<h2>Titre1</h2>
							<blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
						</div>
			  </div>
					<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
<div class="bg-img bg-img-4">
<video autoplay loop muted="" playsinline="">
    <source src="/media/cc0-videos/lddc.webm"
            type="video/webm">

    <source src="./videos/lddc.mp4"
            type="video/mp4">
</video></div>		<h2>Titre2</h2>
							<blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
						</div>
			  </div>
			  					<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
<div class="bg-img bg-img-1">
<video autoplay loop muted="" playsinline="">
    <source src="/media/cc0-videos/lddcrock.webm"
            type="video/webm">

    <source src="./videos/lddcrock.mp4"
            type="video/mp4">
</video></div>		<h2>Titre3</h2>
							<blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
						</div>
			  </div>
</div></div></div></header>
					
					

Comme tu peux le voir, cela ne concerne que la première image (pour commencer, mais cela va être aussi le cas pour les futures images)^^
Merci beaucoup,
P.

Bien joué Olivier !
J'ai honte
Pourtant cela ne fonctionne toujours pas avec les media queries (mais tout roule sans).
Mes dernières CSS :

@media only screen and (max-width: 575px)
{
.lddc .bg-img-1 
	{
		background-image: url('../images/640w/PBal.jpg');
	}

.lddc .bg-img-2
	{
		background-image: url('../images/640w/PBal1.jpg');
	}

.lddc .bg-img-3
	{
		background-image: url('../images/640w/PBal1.jpg');
}
.lddc .bg-img-4
	{
		background-image: url('../images/640w/PBal1.jpg');
	}
.lddc .bg-img-5 {
		background-image: wurl(‘../images/640w/PBal1.jpg’);
}
	}

@media only screen and (min-width: 576px) and (max-width: 768px)
{
.lddc .bg-img-1
	{
		background-image: url('../images/960w/PBal.jpg');
	}

.lddc .bg-img-2
	{
		background-image: url('../images/960w/PBal1.jpg');
	}

.lddc .bg-img-3
	{
		background-image: url('../images/960w/PBal1.jpg');
}
.lddc .bg-img-4
	{
		background-image: url('../images/960w/PBal1.jpg');
	}
.lddc .bg-img-5 {
		background-image: url('../images/960w/PBal1.jpg');
}
}
@media only screen and (min-width: 769px) and (max-width: 1920px)
{
.lddc .bg-img-1
	{
		background-image: url('../images/1920w/PBal.jpg');
	}

.bg-img-2
	{
		background-image: url('../images/1920w/PBal1.jpg');
	}

.bg-img-3
	{
		background-image: url('../images/1920w/PBal1.jpg');
	}
.bg-img-4
	{
		background-image: url('../images/1920w/PBal1.jpg');
	}
.bg-img-5 {
		background-image: url('../images/1920w/PBal1.jpg');

}
}
@media only screen and (min-width: 1921px)
{
.lddc .bg-img-1
	{
		background-image: url('../images/PBal.jpg');
	}

.lddc .bg-img-2
	{
		background-image: url('../images/PBal1.jpg');
	}

.lddc .bg-img-3
	{
		background-image: url('../images/PBal.jpg');
	}
.lddc .bg-img-4
	{
		background-image: url('../images/PBal.jpg');
	}
.lddc .bg-img-5 {
		background-image: url('../images/PBal.jpg');
}
	}

Merci à toi
P.

Olivier C a écrit :
Regarde mieux : il y a encore un couple de guillemets obliques...

C'était le vent

PLGPPUR a écrit :
Après avoir tout corrigé (toutes les réponses sont bonnes, merci), relu, et corrigé de nouveau, et changé encore des erreurs grossières... ça fonctionne Je ne peux malheureusement pas dire ce qui bloquait, excepté des erreurs (nombreuses, pardon) de code. Je ne travaillerais plus le code sur InDesign
Encore merci à vous
Bon week-end,
P.

Tant mieux, alors.
Si je peux me permettre pour la suite, tu devrais aussi voir les valeurs en px pour les font-size et même certaines autres. Par exemples des mélanges entre des % et des px sur la même balise.

width: 80%;
max-width: 960px;

Ça peut fonctionner, mais pour le responsive, les valeurs en px ne sont pas conseillées.