18007 sujets

Questions générales et questions de débutants

[Résolu] Background-image et responsive

Bonjour à tous,
j'ai installé pour un projet un slider avec keyframes et background-image car je ne connaispas JS.
mon image reduit lors du resize de ma page sans problème mais la div dans laquelle elle est installée ne se reduit pas du coup un écart se créé entre mon image et les reste de la page!!!
help me

<section class="slider_bckg"><!--ici 1ère section-->
    <div class="diaporama1"></div><!--ici slider en background-image-->
            <div class="annonce">
			<h1><strong>WEBAGENCY</strong> : L'AGENCE DE TOUS VOS PROJETS 
                       !</h1>
			<p>Vous avez un projet web? La <em>WebAgency</em> vous aide à le 
                          réaliser!</p>
			<a href="#" class="btn">Plus d'infos</a>
		</div>
	</section>


et mon css!!!

.slider_bckg{
	width: 100%;
	height: 37rem;
	position: relative;
	top: 8rem;
}

.diaporama1{
	background-image: url("../images/slider/bg1.jpg");
	background-size: 100%;
	background-repeat: no-repeat;
	position: relative;
	top: 0rem;
	width: 100vw;
	height: 100%;
	

	-webkit-animation-name: diapo1;
	-webkit-animation-duration: 15s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;

	-moz-animation-name: diapo1;
	-moz-animation-duration: 15s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;

	animation-name: diapo1;
	animation-duration: 15s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

@-webkit-keyframes diapo1{
	0%, 45%{background-image: url("../images/slider/bg1.jpg");}
	50%, 95%{background-image: url("../images/slider/bg2.jpg");}
	100%{background-image: url("../images/slider/bg1.jpg");}
}

@-moz-keyframes diapo1{
	0%, 45%{background-image: url("../images/slider/bg1.jpg");}
	50%, 95%{background-image: url("../images/slider/bg2.jpg");}
	100%{background-image: url("../images/slider/bg1.jpg");}
}	

@keyframes diapo1{
	0%, 45%{background-image: url("../images/slider/bg1.jpg");}
	50%, 95%{background-image: url("../images/slider/bg2.jpg");}
	100%{background-image: url("../images/slider/bg1.jpg");}
}

Merci pour vos réponses

Modifié par darkodeur (19 May 2017 - 00:15)
Bonjour,

Le code fonctionne en responsive chez moi, sur une page test. Il faut donc plutôt se pencher, je pense, sur le layout du site : il doit y avoir un ou plusieurs conteneurs englobants le slide, l'un d'entre eux est peut-être définit avec une valeur fixe.

------
PS : les unités ne doivent pas être définies quand elles sont nulles.
top: 0rem;

Doit être en fait :
top: 0;

Même si "ça marche" dans les faits...
Modérateur
Olivier C a écrit :
Bonjour,
PS : les unités ne doivent pas être définies quand elles sont nulles.

PS2: Pour faire mon pénible. Les unités sont optionnelles pour la valeur 0. Mais elles peuvent être définies selon la doc officielle. C'est plus une question de goût et de pratique.
Modifié par kustolovic (19 May 2017 - 09:16)
Bonjour,

merci de vos réponses.
j'ai modifié en enlevant le 0rem pour 0, mais cela ne bouge pas.
L'image se reduit mais son espace d'origine reste de même hauteur quand je resize la page du coup cela créé un décalage avec le reste du contenu.
Le conteneur entourant le slider est .slider_bckg comme sur le code plus haut.
Merci encore de votre aide Smiley cligne
Je reviens vers vous et je me rencontre qu'en inspectant mon projet et plus précisement ma section .slider_bckg, cette dernière conserve toute sa hauteur sans réduction malgré le fait que l'image positionné eavec background-image se resize facilement.
Pourtant je n'ai pas mis de hauteur fixe.
Bonjour darkodeur,

Quel module utilisez-vous pour le diaporama ? Il se peut que la hauteur de celui-ci soit fixée par le biais du JavaScript, pouvez-vous inspecter le code à la recherche d'un attribut style qui surchargerait vos propres styles ?

(edit) Je n'ai rien dit, j'ai lu trop vite Smiley langue

Essayons quelque chose :

1. Sur .slider_bckg, retirez tous les styles ; vous n'avez pas besoin de définir une hauteur pour votre conteneur. (La largeur viendra plus tard éventuellement.)

2. Sur .diaporama1, ne conservez que les styles associés au background et à l'animation : ce bloc ne servira qu'à accueillir l'image de fond.

3. Ajoutez ce bout de CSS à la suite de .diaporama1 :
.diaporama1::before {
    content: "";
    display: block;
    height: 0;
    padding-bottom: 56.25%;
}
C'est un bidouillage que l'on utilise pour rendre responsive les contenus tels que des vidéos ou des iframes (je l'ai épuré pour votre cas). Grâce à la pseudo-classe ::before, nous avons généré un bloc à l'intérieur de .diaporama1 qui prendra naturellement toute la largeur (display: block) tandis que sa hauteur sera relative à la largeur. Le padding de 56.25% correspond au ratio 16/9, soit celui d'une vidéo YouTube : c'est en jouant avec cette donnée que vous trouverez probablement votre bonheur, à condition que vous vous contentiez de ces dimensions pour toutes les images...
Modifié par Saoryx (19 May 2017 - 17:50)
Meilleure solution
Bonjour,
je n'utilise aucun module c'est juste en css avec un background-image et keyframes.
J'ai beau chercher je ne trouve pas. Smiley bawling
Merci pour vos réponses!
#
@Saoryx cette technique fonctionne du tonnerre merci beaucoup j'espère avoir compris le principe!!!
Avez vous un tuto concernant cette technique?
un grand merci encore pour votre aide Smiley cligne
Sujet clos
Aller à