Agrandir image (fond de titre) catégorie

[Plume22]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://www.thevagariesoftime.forumactif.com

Description du problème

Bonjour à tous, ça fait déjà plusieurs mois que je me bat avec ce codage pour essayer d'agrandir l'image de fond de titre de mes catégories. Seulement je tourne en rond et je n'y arrive pas seule.

J'aimerais, si possible, les dimensions suivantes pour l'image en question : hauteur : 200
largeur : 800

Voilà le début du codage de mes catégories :

/*CATEGORIES PAR TRUC.*/
/*haut de catégorie*/
   .topcat {width: 100%;
   height: 25px;
   text-align: center;
   background-image:url('https://i.servimg.com/u/f36/20/36/18/91/source18.jpg')
   font-family: 'Playfair Display', serif; /*peut être modifié*/
   text-transform: uppercase; /* supprime si tu ne veux plus de l'effet du texte en capitale */
   background-color: #ffffff; /*modifie la couleur*/}
   .topcat h2 {font-size: 20px;
   background-color: transparent; /*modifie la couleur*/
   font-weight: 300; /*modifie l'épaisseur (500 c'est la norme) des lettres*/
   margin: 0px;}

Un grand MERCI d'avance !!!

[sunshinette]

Salut

Ton forum ne peut-être visible aux invités donc j'ai pas pu tester sur ton forum mais,
essaye de mettre background-size: cover; comme ceci :

.topcat {
  background-size: cover;
  width: 100%;
  height: 25px;
  text-align: center;
  background-image:url('https://i.servimg.com/u/f36/20/36/18/91/source18.jpg')
  font-family: 'Playfair Display', serif;
  text-transform: uppercase;
  background-color: #ffffff; }

[Plume22]

Hello, tout d'abord, MERCI pour ton aide ! <3

Et oui désolé, j'effectué une mise à jour en même temps. C'est bon maintenant
Alors malheureusement, j'ai installé ton codage et hélas, ça ne fonctionne pas - ça semble même avoir légèrement rétrécie (enfin la taille de la police à diminuer) xD

[sunshinette]

Je ne comprends pas bien ce que tu souhaites faire. Je viens d'aller voir ton forum et ta catégorie est de taille :  852x25. Ton image est redimensionnée à la taille de ta catégorie et ne présente pas de déformation.

On peut agrandir ta catégorie de façon à ce qu'elle fasse 852x200 si tu le souhaites dans ce cas là tu peux mettre ceci :

Code:

.topcat {
  background-image: url(https://i.servimg.com/u/f36/20/36/18/91/source18.jpg);
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  height: 200px;
  padding-top: 1px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  background-size: cover;
}

Seulement ton image étant trop petite en hauteur, elle subie automatiquement une perte de qualité en prenant la taille adéquate à ta catégorie. Pour qu'elle ne soit pas déformée il faut que la hauteur de ta catégorie soit plus petite je conseille

1. de laisser la height en 60px maximum.
ou
2. de prendre une image plus grande en hauteur, le mieux serait de 200px pour qu'elle ne soit pas déformée.

Pour repositionner ton texte au centre de ta catégorie modifie met cela :

Code:

.topcat h2 {
  background-color: transparent;
  font-size: 20px;
  font-weight: 300;
  margin: 0;
  top: 50%;
  position: relative;
}

Si tu choisis de mettre la hauteur de ta catégorie en 60px maximum il te faudra changer le top en top:30%

[Plume22]

Je voudrais que l'image fasse effectivement 852x100 ou 200 éventuellement. Et l'image que j'ai actuellement est bien plus grande que 852x25 - je suppose que c'est le code de base qui redimensionne automatiquement l'image choisi. Et malheureusement ton second codage fourni ne l'agrandi toujours pas, elle reste en 852x25 malgré tout  

exemple taille image souhaitée :



Merci beaucoup pour votre aide, je me doute que ça ne dois pas être évident si je m'exprime comme un pied

[sunshinette]

Je vois d'où vient le problème. L'image mise est une image plus petite, sans doute que lors de l'hébergement elle a été réduite de taille donc, pour que tout soit bien mit, il faut juste coller :

Code:

 .topcat {
      background-image: url(https://i.servimg.com/u/f92/20/37/65/43/mght10.jpg);
      font-family: 'Playfair Display', serif;
      font-size: 17px;
      height: 200px;
      padding-top: 1px;
      text-align: center;
      text-transform: uppercase;
      width: 100%;
      background-size: cover;
    }

(j'ai repris l'image originale du post du dessus, donc normalement ca devrait être ok)

Et aussi faire la modif pour ajuster le texte :

Code:

  .topcat h2 {
      background-color: transparent;
      font-size: 20px;
      font-weight: 300;
      margin: 0;
      top: 50%;
      position: relative;
    }


[Plume22]

Alors... je te laisse aller voir le rendu, j'ai plus de mot x)

[sunshinette]

Tu n'as pas copié/collé l'entièreté du codage je pense, tu as seulement remplacé le lien de l'url de l'image ?

[Plume22]

Nan j'ai tout bien copier/coller comme tu m'as dis, croix de bois, crois de fer

[sunshinette]

Ton code :

Code:

.topcat {
  background-color: #D2D2D2;
  background-image: url(https://i.servimg.com/u/f92/20/37/65/43/mght10.jpg);
  background-size: cover;
  color: #887b82;
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  height: 25px;
  padding-top: 1px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

Le mien :

Code:

   
 .topcat {
          background-image: url(https://i.servimg.com/u/f92/20/37/65/43/mght10.jpg);
          font-family: 'Playfair Display', serif;
          font-size: 17px;
          height: 200px;
          padding-top: 1px;
          text-align: center;
          text-transform: uppercase;
          width: 100%;
          background-size: cover;
        }

remplace tout l'ancien par le mien

[Plume22]

Je viens de le remplacer, ça ne change rien :/
Se pourrait t-il qu'un autre code de mon CSS bloque la modification qu'on essaye de faire ?

[sunshinette]

Je ne pense pas car quand je modifie depuis l'inspecteur cela se passe bien, c'est la valeur height est toujours de 25px et non de 200px et le superflus est toujours présent comme si la modification n'avait pas eu lieu.

Si tu es d'accord de me donner l'accès temporaire à ton forum avec un mdp temporaire (que tu changeras après mon passage) je peux faire moi même la manip si tu le souhaites. Mais je comprendrais que tu refuses. De mpn côté je ne vois aucun soucis qu'il ferait que cela ne fonctionne pas.

L'url de l'image a été changé mais pas la suite du code

(bien entendu en mp le mdp et identifiant)

[sunshinette]

Ton soucis est réglé, tu avais un doublon de code. Un peu plus bas tu avais l'ancien code dans ta feuille de style. J'ai supprimé l'ancien est laissé seulement le nouveau

[Plume22]

MERRRRRRRRRRCCCIIIIIIIIIIIIIIIIIII BEEEAUUUUCCCCOOOUUUUPPPPP !!! C'est parfait maintenant !!!