[Réglé] Support des styles ⇒ changer la taille de mon image bg_header dans mon style

[fastgil.com]

Bonjour je voudrait changer la taille de mon image dans style BlueLand_32
Le code de base dans mon style est :

code : Tout sélectionner

.headerbar {
	background-color: #DCECF3; /*#D2E0E6*/
	background-image: url("./images/bg_header.png");
	color: #74A9CA;
	margin: 0;
	padding: 0;
	border-radius: 5px 5px 0 0;
}

Le problème c'est que meme en rajoutant la taille en hauteur et largeur en pixel et centrer l'image, rien ne se passe.
On dirait que l'image n'a tout simplement pas la place de s'agrandir en hauteur.
ou dois je changer ça, et peut etre mon prosilver prend le dessus ?

code : Tout sélectionner

.headerbar {
	background-color: #DCECF3; /*#D2E0E6*/
	background-image: url("./images/bg_header.png");
	color: #74A9CA;
	margin: 0;
	padding: 0;
	border-radius: 5px 5px 0 0;
	height: 251px; /* Ajoutez la hauteur souhaitée ici */
}

251 pixels au lieu de 151 pixels actuellement
Merci de votre aide

[Ilya Giron]

Votre image faisant 1060x151 jamais vous ne pourrez avoir une hauteur de 251 px

Capture d’écran 2024-03-20 à 17.23.57.png

[fastgil.com]

Oui j’ai remis l’image initiale pour ne pas mettre une moitié d’image
Donc l’image qui va la remplacer va être plus haute 251

voici le screen

et voici l'image

[cabot]

Hello,

Le problème c'est que les dimensions de ton images ne sont pas adaptées à la largeur du forum, donc elle va être agrandie et perdre un peu en qualité sur la largeur maxi.
Rien de grave, tu me diras, mais idéalement il faudrait qu'elle fasse au moins 1305px de large.

Remplace ton CSS par ça :

code : Tout sélectionner

.headerbar {
	background-color: #DCECF3; /*#D2E0E6*/
	background-image: url("https://www.city-games.fr/citybb3/ext/dmzx/imageupload/img-files/3/4ec3916/be4ecf0/cb240ef28f35a727f693ec3712a23030.png");
	color: #74A9CA;
	margin: 0;
	padding: 0;
	border-radius: 5px 5px 0 0;
	background-repeat: no-repeat;
	background-size: contain;
	aspect-ratio: 1060 / 251; /* largeur en px / hauteur en px */
}

[Ilya Giron]

Il est préférable de placer l'image dans le dossier prévu à cet effet du style au lieu d'utiliser un lien d'une extension.
Pas certain de votre code en mode responsive.

[cabot]

Non mais je donne un exemple, OP fait ce qu'il en veut.

Quant au responsive, moi je suis sûr. Que vous ne compreniez pas le CSS est un autre problème.

[Ilya Giron]

Vous avez raison, certaines subtilités de CSS m'échappent, mais si cet aspect en version smartphone vous convient c'est parfait

responsive.png

[cabot]

Oui c'est ce que je dis, vous ne comprenez pas le CSS, en l’occurrence le principe de la cascade et du contexte.
Le code indiqué est adapté au style du forum de l'OP.

[fastgil.com]

Merci à vous deux de votre aide ( bien sur que l'image aura le nom et l'emplacement prévu à l'image d’origine )
Merci cabot, je vais redimensionné mon image comme vous l'avez suggéré et changer le code du .css
je reviens vers vous
Merci

voila cabot
j'ai agrandie mon image à la dimension conseillé, c'est nickel !

si on avait un gars aussi fort que toi en style dans notre équipe, on en ferait des jolies choses
bravo

[Ilya Giron]

Bravo cabot, le responsive est parfait

IOS.jpg