28111 sujets

CSS et mise en forme, CSS3

[Résolu] Background Logo Responsif no-repeat

J'ai ceci dans mon css :

*,
::before,
::after {
    box-sizing: inherit; 
    background-repeat: no-repeat;
    min-width: 0;  
    min-height: 0;
}
.grid {
    grid-template-columns: auto 1fr;
}
img {
   object-fit: contain;
}
.block-bg-logo {
   height: 150px;
    background: url("img/logo.png")
}

Si je ne mets pas de hauteur, le background ne s'affiche pas.
Et malgré le reset (background-repeat: no-repeat;) le background se repète.
D'où mon hésitation entre deux layouts :

<header class="grid">
    <div class="block-img-logo">
        <img src="img/logo.png">
    </div>		
    <div class="block-navigation">
         <ul>Navigation</ul>
    </div>



<header class="grid">
    <div class="block-bg-logo">/div>		
    <div class="block-navigation">
         <ul>Navigation</ul>
    </div>
Modérateur
Salut,

background est un raccourcis pour background-color / background-image / background-repeat / background-attachment / background-position.
Donc, en gros, c'est comme si tu avais écris :
* {
    background-repeat: no-repeat;
}
.block-bg-logo {
    background-image: url("img/logo.png");
    background-position: 0% 0%;
    background-size: auto auto;
    background-repeat: repeat;
    background-origin: padding-box;
    background-clip: border-box;
    background-attachment: scroll;
    background-color: transparent;
}

Donc ton background-repeat se fait écraser.
Il faut juste mettre background-image: url("img/logo.png"); si tu ne veut pas écraser le repeat.
Meilleure solution
Modérateur
Sinon, pour moi, il vaut mieux opter pour ta première solution avec ton logo dans la balise <img>. Non pas pour le problème que tu viens d'exposer mais plutôt pour des raisons d'accessibilité et de sémantique. Un background est quelque chose d'assez "invisible", il n'a pas d'éléments proprement défini ca doit donc rester du décors. Ici on parle du logo quand même c'est assez important pour mettre une image (sur laquelle tu pourras mettre un attribut alt etc..)

Bonne soirée !
Bonsoir,
Super... merci pour la correction de cette erreur.. maintenant c'est ok.
Et merci aussi pour me faire évoluer sur le rôle du logo et donc quelle solution utiliser.
Je pense que maintenant je vais suivre ton avis et c'est également plus facile à gérer.
Par contre petit souci alors..
J'utilise donc maintenant 

img {
   width: 100%;
   height: auto;
   object-fit: contain;   
}

Mais cela ne suffit pas pour que le logo se redimensionne avec une largeur maxi tout en conservant son ratio et sans être rogné.
Modifié par cpalo (06 Apr 2021 - 23:19)
Modérateur
Salut,

Bah pour moi ça le fait bien si :
https://jsfiddle.net/zu58t6yb/
L'image a bien pris 100% de la largeur en gardant son ratio..

Mais je manque peut etre ce code ou alors j'ai mal compris ce que tu veux... tu peux tenter de reproduire ton cas dans le jsfiddle ?
Bonsoir
Avec width=100% cela fonctionne.
J'étais parti à vouloir utiliser object-fit: . Il faudra que je revois donc son utilisation.
Si j'ai ce code, cela fonctionne correctement

.grid-container {
    grid-template-columns: 1fr 3fr;
}
    .grid-container .block-logo { grid-column : 1 ;}
    .grid-container .block-navigation { grid-column : 2 ;}

Par contre si j'utilise :

.grid-container {
    grid-template-columns: auto 1fr;
}

Alors l'image du logo reste fixée à sa taille réele.
Modifié par cpalo (07 Apr 2021 - 19:41)
Oups toutes mes excuses.
Je ne voulais montrer que la partie du code qui faisait que ça ne fonctionnait pas.
Naturellement j'avais bien un display: grid;

Je voulais dire que ça ne marchait pas si j'avais 

grid-template-columns: auto 1fr;


D'où l'interet de publier un exemple. Il va falloir que je commence à utiliser codepen ou jsfiddle.. Un avis sur le choix?

Par rapport à cette solution simple (width: 100%) sur un grid-item ( largeur en fr)., quelle est alors l'utilisation de object-fit qu'on voit utilisée dans des galeries d'images?
Modérateur
cpalo a écrit :
Je ne voulais montrer que la partie du code qui faisait que ça ne fonctionnait pas.
Naturellement j'avais bien un display: grid;

Mais du coup ca fonctionne maintenant ?

cpalo a écrit :
D'où l'interet de publier un exemple. Il va falloir que je commence à utiliser codepen ou jsfiddle.. Un avis sur le choix?

Oui c'est vraiment très utile pour discuter des mêmes choses et voir la même chose.
Perso je suis 100% jsfiddle pour aucune raison spéciale, juste un feeling, mais codepen marche tout aussi bien. Aucune différence et même pas besoin de créer de compte donc tu peux tester les deux.

cpalo a écrit :
Par rapport à cette solution simple (width: 100%) sur un grid-item ( largeur en fr)., quelle est alors l'utilisation de object-fit qu'on voit utilisée dans des galeries d'images?

Alors j'utilise très rarement object-fit... mais je pense (@ceux qui me lisent : arrêtez moi si je me trompe) qu'il est surtout utilisé pour sa capacité a faire un "cover" avec une image, chose que l'on ne pouvait faire qu'en CSS avec le background-size... Apres, si tu arrive a faire sans, il ne faut pas s'entêter a faire avec hein Smiley biggrin Si tu arrive a faire sans c'est que tu n'en a pas besoin Smiley lol
Voilà je viens de créer mon premier codepen.
https://codepen.io/cpalo/pen/KKayPYW?editors=1000

Et effectivement tout fonctionne.
En fait tant que le viewport est assez large, le logo s'affiche dans la dimension demandée.
Et sous Chrome, et Firefox je ne peux pas réduire la fenêtre du navigateur à moins de 500px. Par conséquent avec une image de 400px je ne pouvais pas me rendre compte des effets du redimensionnement.

Cordialement
Sujet clos
Aller à