Bonjour à tous et toutes

Je me retourne vers vous pour régler définitivement un problème de mise en page.

Le contexte est le suivant :

J'ai un header

J'ai un footer

J'ai un fond blanc qui est superposé sur les 2 éléments précédents.

Voici le code :

body 
{
background-color: #F1F1F1;
background-image: url("image/fond_blanc.png"), url("image/header.png"), url("image/footer.png") ;
background-position: 50% 90%, top center, bottom center;
background-repeat: no-repeat;
}

Je suis donc parvenu à faire superposer le fond blanc en le mettant en première position.

J'ai également réussi à le positionner comme je le voulais grâce aux pourcentages.

Question 01 : Est-il possible d'appliquer un 'border radius' à ce fond blanc ?

Question 02 : Est-il possible de rendre ce fond blanc extensible ? (Il est sensé accueillir le contenu -> Il doit s'adapter)

___

Vous me direz que je n'ai qu'à faire une boite puisque c'est une bête image blanche.

- Oui c'est vrai, je l'ai d'ailleurs fait. Sauf que quand j'applique une autre boite sur ce fond blanc (qui serait lui même une autre boite), le texte tapé est caché par cette deuxième boite (Vous me suivez ?  ) : La superposition des boites cache le texte qui y apparait autrement dit.

Vous me direz que je n'ai qu'à considérer ce fond blanc comme une image à mettre dans le CSS (et non dans le HTML puisque cela pourrait alourdir la page vu la taille).

- Oui c'est vrai, j'ai d'ailleurs essayé. Sauf que l'image n'apparait pas lorsque je le mets ds le CSS

Code HTML :

<div class="fond_blanc"></div>

Code CSS :

.fond_blanc
{
background-image: url("image/fond_blanc.png");
border-radius: 60px;
position: absolute;
top: 100px;
left: 100px;
}

Le chemin de l'image est correcte, je l'ai vérifié d'une autre manière.

Voilà. Comme vous voyez, j'ai pas arrêté de chercher avant de venir ici.

Les problèmes que j'ai rencontré, j'ai réussi à les régler tout seul mais je dois dire que ça commence à être pesant d'avoir des problèmes de mises en page alors que la structure est primordiale...

Merci d'avance pour vos lumières 

-
Edité par brandonvanparys 31 octobre 2014 à 17:54:01

bonsoir, ma première question est: Pourquoi vouloir placer toutes les images en background du body et pas au élément correspondant? 

ensuite pourquoi vouloir utiliser les positions absolute?

Je n'ai pas compris pourquoi utiliser une image blanche alors que la couleur blanche devrais faire l'affaire et qui de plus allègerais le poids total de la page.

réponse à Question 01 : oui comme tout éléments , ici c'est le body qui prendrais le border-radius.

réponse à Question 02 : si tu applique une couleur en background d'un élément block celui-ci prend par défaut la largeur disponible et donc oui il peut être extensible .(pour une image elle peut être extensible (100%) mais serais déformée, ou avec un background-size: cover elle serais adaptée mais rognée soit en hauteur ou en largeur.)

-
Edité par casperweb 31 octobre 2014 à 18:54:47

bsr;

Un background-size: cover center center; 

Fera l'affaire sans rogner l'image, car cette dernière s'ajustera par son centre !

Casperweb :

Justement je démontre qu'en séparant les arrières plans avec des 'div', ils n'apparaissent pas.

Je viens encore d'essayer.

Code HTML :

<div class="header"></div> 

Code CSS :

.header
{
background-image: url("image/header.png");
}

(Bon évidemment, le positionnement n'est pas mentionné, je veux juste vérifier que l'image apparait mais ce n'est pas le cas).

Ce qui est dingue puisque ça fonctionne dans le 'body' pourtant !

Ensuite, pour répondre à la question j'utilise tout simplement 'absolute' pour positionner précisément mes éléments.

Ce n'est pas l'idéal ? 

J'en conviens que j'adopte peut-être (probablement) des mauvaises techniques mais je suis de bonne volonté et suis là pour apprendre.

Donc je suis ouvert à toutes suggestions 

bonjour, tu vas y mettre du contenu dans cette div (qui en html5 s’appelle <header> ) si pas, donne lui une hauteur.

>> Ce qui est dingue puisque ça fonctionne dans le 'body' pourtant !

Le body lui à la hauteur de la fenêtre du navigateur, c'est pour cela que tu le vois.

Position absolute n'est en général pas une bonne technique de positionnement car ce n'est pas responsive (cela ne s'adapte pas au différente résolution). Positionne avec des marges en laissant les élément ce positionner d’eux même dans le flux. Cela peux s'utiliser pour un élément en particulier avec position relative sur le parent.

<!DOCTYPE HTML>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>background</title>
	<style type="text/css"> 
html , body {
	height: 100%; 
}
body {
	background: #ffccff;
}
header {
	background: url(http://lorempixel.com/400/200); 
	height: 200px; 
}	
main{
	background: #ffffff;
	height: 50%;
	border-radius: 50px; 
}
footer {
background: url(http://lorempixel.com/400/200/sports/); 
	height: 200px;
}
	</style>
</head>
<body>
	<header></header>
	<main></main>
	<footer></footer>
	
</body>
</html>

@marcdavid029 merci pour cette solution que je n'ai jamais testé, je testerais à l’occasion

Oui, en rajoutant la hauteur ça fonctionne =)

Merci pour ces conseils, je vais essayer de chipoter de mon côté pour voir si j'avance.