[Réglé] Mettre une image en background dans le header

Pour les recherches et les demandes de modifications de styles concernant votre forum phpBB 3.3

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com - Conditions générales de support graphique

Attention : pour éviter les bogues, votre style doit être mis à jour en même temps que votre forum, et ce, dans la dernière version disponible de phpBB !

[Réglé] Mettre une image en background dans le header

Messagepar Fannyoiseau » 08 Déc 2020 à 13:03

Bonjour à tous,

Je voudrais installer une nouvelle image top_navbar.png en plus de la guirlande. Je suppose que dans un premier temps, il faut que j'aille dans le dossier/thème/images/ du style. Cette nouvelle réalisation afin de mettre le rougegorge en relief et au même emplacement afin qu'il ne soit pas voilé par le fond d'écran ;Je pense que c'est possible, mais comment faire après SVP afin que ce nouveau fichier apparaisse dans ma feuille de style css :?:

Merci par avance pour votre aide et précieux dévouement, toujours utile et très efficace.

Cordialement,
Modifié en dernier par Fannyoiseau le 12 Déc 2020 à 16:49, modifié 4 fois.
Avatar de l’utilisateur
Fannyoiseau
Posteur néophyte
Posteur néophyte
 
Messages: 55
Enregistré le: 20 Oct 2017 à 16:32
Localisation: Ajaccio (Corse)

Re: Installer un nouveau fichier dans mon css

Messagepar cabot » 08 Déc 2020 à 22:53

Hello, doit y avoir moyen mais là c'est un peu compliqué parce le p'tit oiseau est dans une grande image.
Il faudrait le détourer et en faire une image à part pour l'utiliser par dessus le reste.
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26896
Enregistré le: 13 Fév 2011 à 19:42
Localisation: Rarement sur la plaque

Mettre une image en background dans le header

Messagepar Fannyoiseau » 09 Déc 2020 à 08:16

Bonjour Cabot,

Une nouvelle fois merci beaucoup de me venir en aide ! En fait je me suis mal exprimée : sur la grande image, par le biais de photofiltre, j'ai intégré l'oiseau pour agrémenter celle-ci. Le rougegorge comme tu pourras le voir ci-dessous est une image prise à part.

Grande image

Rougegorge

Ma question était : « comment mettre cette image par-dessus » ? Je pense que c'est possible en allant dans le dossier image et en la téléchargeant, mais après c'est là où je bloqueImage
Que dois-je faire pour qu'elle s'inscrive dans le fichier Free_Birds.css. (Comme l'image top_navbar.png que j'ai retrouvée grâce à ton interventions, lors d'une précédente demande).
modifications-et-recherche-de-styles-phpbb33/sujet214384.html

J'espère avoir été plus compréhensible, car pas facile de bien s'exprimer par écrit . Encore merci Cabot pour ton aimable intervention.

Bonne journée,
Modifié en dernier par Fannyoiseau le 12 Déc 2020 à 15:50, modifié 1 fois.
Avatar de l’utilisateur
Fannyoiseau
Posteur néophyte
Posteur néophyte
 
Messages: 55
Enregistré le: 20 Oct 2017 à 16:32
Localisation: Ajaccio (Corse)

Re: Installer un nouveau fichier dans mon css

Messagepar cabot » 09 Déc 2020 à 13:57

En gros, tu voudrais quelque chose comme ça ?

Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26896
Enregistré le: 13 Fév 2011 à 19:42
Localisation: Rarement sur la plaque

Re: Installer un nouveau fichier dans mon css

Messagepar Fannyoiseau » 09 Déc 2020 à 14:01

Oui Cabot, c'est exactement ça ! :D
Modifié en dernier par Steph le 09 Déc 2020 à 14:34, modifié 1 fois.
Raison: Suppression de la citation inutile de message en entier et auquel tu réponds directement
Avatar de l’utilisateur
Fannyoiseau
Posteur néophyte
Posteur néophyte
 
Messages: 55
Enregistré le: 20 Oct 2017 à 16:32
Localisation: Ajaccio (Corse)

Re: Installer un nouveau fichier dans mon css

Messagepar cabot » 09 Déc 2020 à 14:24

Ah ben pour le coup c'est très simple.

Ouvre Free_Birds.css

Trouve :
Code: Tout sélectionner
.headerbar {
	background-color: transparent;	
	background-image: none;
	float: none;
	margin: 0 auto;
	padding: 0px;
	width: 100%;
	
}

Remplace par :
Code: Tout sélectionner
.headerbar {
    background: url("https://www.zupimages.net/up/20/50/47ar.png") no-repeat right/contain;
    margin: 0 auto;
    padding: 0;
}


Edit : peux-tu modifier ton titre, stp, mets plutôt quelque chose comme "Mettre une image en background dans le header"
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26896
Enregistré le: 13 Fév 2011 à 19:42
Localisation: Rarement sur la plaque

Re: Mettre une image en background dans le header

Messagepar Fannyoiseau » 09 Déc 2020 à 15:23

Grand Merci Cabot ! Pour toi c'est simple, mais pour moi le parcours du combattant.
Je vais essayer de mettre tout cela en place et enfin pouvoir admirer les jolies couleurs de Monsieur rougegorge, une fois qu'il sera passé par-dessus la balustrade. :) Merci !!
Avatar de l’utilisateur
Fannyoiseau
Posteur néophyte
Posteur néophyte
 
Messages: 55
Enregistré le: 20 Oct 2017 à 16:32
Localisation: Ajaccio (Corse)

Re: Mettre une image en background dans le header

Messagepar cabot » 09 Déc 2020 à 20:34

On est là pour t'aider à franchir les obstacles. :)
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26896
Enregistré le: 13 Fév 2011 à 19:42
Localisation: Rarement sur la plaque

Re: Mettre une image en background dans le header

Messagepar Fannyoiseau » 10 Déc 2020 à 11:02

Bonjour Cabot et à vous tous,

Merci beaucoup Cabot ! C'est très agréable de trouver de l'aide , comme c'est le cas chaque fois que j'en ai eu besoin.
J'avais marqué réglé à l'attribut de ce sujet hier soir , mais si je peux me permettre j'ai une autre question.

Finalement j'ai fait un essai et sans supprimer,
Code: Tout sélectionner
.headerbar {
	background-color: transparent;	
	background-image: none;
	float: none;
	margin: 0 auto;
	padding: 0px;
	width: 100%;
	


J'ai simplement ajouté le code ci-dessous , ce qui m'a permis de voir l'oiseau une seule fois et en relief :) . Si je n'abuse, est-il possible que je puisse le décaler plus sur la gauche et éventuellement le descendre :?: ensuite, et ce sera ma dernière question :oops: faut-il chaque fois que j'aille ouvrir Free_Birds.css pour coller le lien si je veux changer d'image, ou je peux passer par mon FTP FilleZilla . j'ai essayé en nommant l'image header, mais elle ne passe pas. Encore mille mercis pour tout !

Code: Tout sélectionner
.header bar {
    background: url("https://www.zupimages.net/up/20/50/47ar.png") no-repeat right/contain;
    margin: 0 auto;
    padding: 0;
}
Avatar de l’utilisateur
Fannyoiseau
Posteur néophyte
Posteur néophyte
 
Messages: 55
Enregistré le: 20 Oct 2017 à 16:32
Localisation: Ajaccio (Corse)

Re: Mettre une image en background dans le header

Messagepar Steph » 10 Déc 2020 à 12:35

Hello,

Personnellement je trouve qu'il serait préférable d'héberger ton fichier image sur ton forum plutôt que zupimages, à moins que ce soit juste provisoire.
Avatar de l’utilisateur
Steph
Administrateur
Administrateur
 
Messages: 20697
Enregistré le: 29 Déc 2008 à 15:48
Localisation: Alsace / Bas-Rhin / France

Re: Mettre une image en background dans le header

Messagepar Fannyoiseau » 10 Déc 2020 à 13:06

Bonjour Steph,

Oui, tu as raison ! j'ai tendance parfois à faire bêtement abstraction de ce qui serait certainement plus prudent et pratique. Merci pour ce bon conseil !
Avatar de l’utilisateur
Fannyoiseau
Posteur néophyte
Posteur néophyte
 
Messages: 55
Enregistré le: 20 Oct 2017 à 16:32
Localisation: Ajaccio (Corse)


Retourner vers [3.3.x] Modifications et recherche de styles

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 2 invités