Body avec un background-image en height 100% impossible à faire

Bonjour,

Je n’arrive pas à mettre une image en mode cover (height: 100%). Pourtant j’ai bien respecté les règles. J’ai même tenté le tout pour le tout avec un !important;

Impossible de voir où se trouve le souci

Mes CSS :

	html {
	height: 100%;
	margin-top: 0px;
	margin-left: 0px;
	padding-right: 0px;
}

body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	font-weight: 300;
	font-size: 15px;
	position: absolute;
	overflow-x: hidden;
	overflow-y: visible;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width:100%;
	height: 100% !important;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(../images/PBal1.jpg);
*{box-sizing:border-box;}
}

Une idée ? Merci beaucoup

P.

Tu sais tu gagnerais tellement de temps à juste mieux expliquer le problème.

Genre, ce que tu obtiens et ce que tu souhaiterais obtenir.

Ici, ça marche ton code. Ton navigateur doit certainement ajouter une marge sur le body. Essaye de rajouter margin-top: 0px;margin-bottom: 0px; dans le body. Aussi tu peux éventuellement même mettre margin: 0.

Attention aussi avec position: absolute sur body : pourquoi le positionner alors qu’il s’agit de ton conteneur de base, donc qu’il devrait pas être dépendant du flux ?

Bonjour viki53,

Désolé, je n’avais pas vu ta réponse

Je ne sais pas trop quoi te dire Si je retire la position absolute, mon image (background) s’affiche avant le loader. Le loader est indispensable car mon animation (slider) met du temps à se mettre en route Donc je me retrouve avec Background>loader (fond noir)>background.

Avec la position absolute, j’ai directement le loader

Encore merci viki53

Bonsoir,

J’ai répondu après la réponse de ache, mais j’ai du oublier de valider. Je m’excusais pour ma clarté entre-autres

Alors voilà, j’ai cherché très longtemps, puis j’y suis allé par élimination et ça m’a pris un bon moment mais je n’avais pas le choix pour cerner le souci.

Alors voilà, le problème vient de ce code :

<video autoplay loop muted="" playsinline="">

Si je le retire, mon image devient responsive, sans débordement.

Le seul hic, c’est que j’ai absolument besoin de l’autoplay

Voici le HTML concerné :

<div class="bg-img bg-img-2">
<video autoplay loop muted="" playsinline="">
    <source src="./videos/lddcintro.webm"
            type="videos/webm">

    <source src="./videos/lddcintro.mp4"
            type="video/mp4">
</video></div>	

Un grand merci à vous

P.

Bonsoir tout le monde,

Toujours aucune idée du souci de débord / ligne vidéo ?

Merci et bonne soirée,

P.