5568 sujets

Sémantique web et HTML

Background invisible dans <div>

Bonjour,

Autant vous l'avouer de suite, j'ai carrément honte de vous poser la question ci-dessous mais pour une raison qui m'échappe, je connais échec sur échec à chaque tentative.

Je cherche à mettre une image de fond dans un bloc, ce qui normalement relève du niveau MatSup (Maternelle supérieure) Smiley sweatdrop

Le code html se présente comme ceci :
<main id="main">
		<section class="ecran1">
			
		</section>
		
		<section class="ecran2">
			
		</section>	
	</main>


Et le code css :
#main {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 0 auto;
	}
	.ecran1 {
		height: 650px;
		background-color: #000;
		background-image: url('/images/background1.png');
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.ecran2 {
		height: 650px;
		background-color: #fff;
		background-image: url('/images/background2.png');
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}


Voilà... Dîtes-moi si je dois retourner en petite section Smiley sweatdrop Merci !

Edit : Argh.... si un modérateur passe par là, peut-il déplacer mon post dans la section CSS svp ? Merci... Smiley biggrin
Modifié par Marie08 (04 Feb 2019 - 08:16)
Modérateur
Bonjour,

Ce code marche en l'état.

Faire un test en mettant une copie des images dans le même dossier que la feuille de style et en utilisant url('background1.png') et url('background2.png').

Si ça marche (et ça devrait), vérifier que /images/background1.png et /images/background2.png sont les bons chemins vers les images (attention au majuscules/minuscules, aux extensions, le dossier images est-il ici à la racine du site ou pas ? etc.).

Amicalement,
Bonjour Parsimonhi et merci de votre réponse.

je ne comprends pas, ma page reste désespérément blanche.

Forcément, si j'impose un width: 1000px par exemple, je vois mon image mais ce n'est pas ce que je veux faire.

Je voudrais simplement avoir une image de fond pour chaque "écran" (page) et pouvoir écrire par-dessus. Chaque écran défilerait au fur et à mesure du scroll de l'internaute.

Je vous propose le code de mon <body> pour le cas où...
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	text-align: justify;
	font-family: arsenal-regular-webfont, Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	font-size: 2rem;
	line-height: 2.5rem;
	color: #080706;
	/*background-color: #f7f7f7;*/
}


Merci de votre attention,
Modérateur
Bonjour,

C'est pourtant pas difficile à tester.

Il faudrait déjà mettre du contenu dans les sections.

Amicalement,
Si je place du texte au kilomètre, forcément mon image apparaît bien en fond sur toute la largeur de l'écran. Mais ce n'est pas ce que je veux.

Je souhaite que mon bloc soit "ouvert" sur tout l'écran avec l'image en fond, même si je ne dois avoir qu'un titre à y écrire.

Je dois passer à côté d'un truc tellement élémentaire...

Merci
Modérateur
Bonjour,

Il faut lui donner une largeur dans ce cas (ou retirer les flex, ou utiliser tout autre moyen qui forcerait l'élément à prendre une largeur plus grande que ce dont a besoin le contenu). Mais ce n'est pas un problème de background du coup. La solution dépend de tout ce qui est par ailleurs dans la page.

Amicalement,
Modifié par parsimonhi (04 Feb 2019 - 12:03)
Merci Parsimonhi, je testerai en retirant le système de FlexBox entièrement pour partiellement.

Belle semaine à vous,
Sujet clos
Aller à