Bonjour à tous,

Je n'ai pas fait de CSS depuis un moment - je m'y remets depuis peu - et je me rends compte que c'est un ENFER pour placer les éléments quand on ne maîtrise pas les propriétés. Pourtant, je souhaiterais avoir un rendu tout simple. Je dois afficher une image qui sera le fond de ma page web (cette image ne doit jamais être rognée, ni en hauteur ni en largeur) et je dois afficher deux logos au centre de cette image, qui auront une taille précise. Or, ça fait depuis hier que je m'arrache les cheveux à essayer de placer les uns et les autres mais rien à faire. En gros, le peu de CSS ressemble actuellement à ça :

	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	background: url('images/background.jpg') no-repeat top left;
	background-size: contain;
}

.logo1 img {
	position: relative;
	height: 9%;
	width: auto;
}

Sauf que ça ne marche pas du tout, je sais qu'il manque des choses au code actuel, c'est la dernière version après avoir essayé plein de choses qui ne fonctionnaient pas.

Merci d'avance si quelqu'un peut me débloquer !
 

Salut,

Dur de répondre avec si peu de code et de détail.

Déca première incohérence tu veux que ton image de fond ne sois jamais rogné mais tu ne peux pas prévoir la taille du navigateur de l'utilisateur ni les redimensionnement de la fenêtre. 

Les propriété background-size : contain & cover  force l'image à garder son ratio et logiquement pour qu'une image garde son ratio elle doit être rogné à un moment donné. 

contain force l'image à être la plus grande possible dans son conteneur sans dépasser ont dit que l'image est contrainte par son conteneur donc l'image ne prendra pas toujours toute la place disponible pour conserver ses proportions et laissera possiblement des vides.

cover quand à elle force l'image à recouvrir tout le conteneur mais toujours en conservant ses proportions donc les parties qui dépassent du conteneur sont rognées.

Imaginons tu as une image de 1000px de large et 5000px de hauteur tui lui donnes un background-size : 100% 100%(qui correspond à width : 100% et height: 100%) si le ration 1/5 n'est pas respecté par la fenêtre alors l'image sera non pas rogné mais déformé donc à voir ce que tu cherches comme résultat mais plus d'informations seraient les bienvenues. 

Pour le logo tu ne dis pas non plus précisément mais si c'est juste que tu n'arrives pas a dimensionné le logo en % c'est certainement que tu n'as pas définit toutes les dimensions des éléments parents. Un éléments qui n'est pas dimensionné est en auto et  il n'est pas possible de définir une taille relative si un élément parent est en auto.

-
Edité par Mamashi 26 mai 2017 à 14:59:33