27653 sujets

CSS et mise en forme, CSS3

Bonjour
Je souhaite une div avec une couleur d arrière plan et en bas à droite une image, dans mon cas un homme. Je souhaite que la taille de cette image évolue avec la taille de la div au gré des redimensionnements (sans parler de media query)
Mon pb est que si mets mon image en bottom, la tête de l homme est masquée, si je le met en top, quand la div est peu haute, on y voit que le visage. alors que j aimerais qu on le voit en entier mais plus petit...
Je tente de m inspirer de ceci https://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html mais je ne parviens à tien si je n'utilise qu une image de l homme.
Si j utilise une image de l homme sur fond en totalité, là tout fonctionne comme dans le tuto bien évidemment.

Quelques conseils seraient les bienvenus
Merci pour votre aide.
Modérateur
Salut !

Un petit bout de code (idéalement dans un codepen ou jsfiddle) serait le bienvenu pour mieux t'aider.
Merci pour vos réponses.

Pour le tuto j ai regardé mais je ne trouve pas de réponse à ma question car il s agit d un mix entre les tutos et le lien que j ai cité.
Et comme il est vrai qu un bout de code vaut mieux que qu'une description plutôt imparfaite, j ai mis tout ça ici

https://codepen.io/jean-nemmare/pen/JjEZMLB

Quand on redimensionne la fenêtre la taille de l image reste fixe alors que j aimerais qu'elle évolue proportionnellement comme cela se passe avec un " background-size: cover;"

merci de votre aide
Modérateur
Et avec un background-size: contain; ?

Et sinon tu peux toujours jouer avec les @média pour avoir des comportement différents sur mobile :


@media (max-width: 800px) {
        .bg1 {
                /* ... */
    	}
}
Merci pour cette réponse.

background-size: contain; oui et non, ça ne fait pas exactement ce que je souhaite
Effectivement un media query est ce qu il y a de plus simple pour m en approcher mais necessite beaucoup de breakpoints.
Ce que je veux peut être réalisé en Js asses simplement en modifiant durant le resize la propriété backgroundSize de mon image de fond.
Merci pour vos conseils