Résolu
Image de masterfree
masterfree

Logo dans un background existant

Bonjour à tous,


La largeur de mes pages du site font 1080px.

J'ai mis un background fixe, mais je voudrais ajouter le logo du site en haut et à gauche de l'écran de manière fixe.


Avec les infos recueillies, je n'ai eu que la déclaration sous le BODY, mais ça ne s'affichera que sur la page et moi, je voudrais que ce logo soit indépendant des pages.


entete_inc.php


	</head>
<body>
<div id="logo"></div> 


style.css

#logo {
	display: absolute; 
	top: 0; 
	left: 00;
	background-image: url(http://qi98.free.fr/images/banniere/logo/logo.gif);
	background-repeat: no-repeat;
}

Comment faire ?


Merci de vos réponses.


Masterfree

375 vues
04 mars 2023 à 9:54
Cette pub permet au site de vivre ...

Salut @masterfree ✌️


Voici la solution à ton problème :


Ta page entête à inclure sur toutes tes pages :


<div id="logo"><a href="http://votresite.com"><img src="http://qi98.free.fr/images/banniere/logo/logo.gif" alt="Logo de votre site"></a>
</div>



Ton fichier de style modifié :


#logo {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100px;
height: 100px;
background-color: transparent;
}


Voilà j'espère que ça t'aura bien aidé !


Tu noteras juste que la propriété "position: fixed" permet à l'élément de rester fixe sur l'écran même lorsque l'utilisateur fait défiler la page.

De plus, tu noteras que la propriété "z-index" permet de contrôler la position de l'élément par rapport aux autres éléments de la page.


Très bonne journée Masterfree 🙃


Florent.

Cette pub permet au site de vivre ...

1 commentaire

Flomir
Le 25 avril 2023 à 1:44 (Édité)

Salut @masterfree ✌️


Voici la solution à ton problème :


Ta page entête à inclure sur toutes tes pages :


<div id="logo"><a href="http://votresite.com"><img src="http://qi98.free.fr/images/banniere/logo/logo.gif" alt="Logo de votre site"></a>
</div>



Ton fichier de style modifié :


#logo {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100px;
height: 100px;
background-color: transparent;
}


Voilà j'espère que ça t'aura bien aidé !


Tu noteras juste que la propriété "position: fixed" permet à l'élément de rester fixe sur l'écran même lorsque l'utilisateur fait défiler la page.

De plus, tu noteras que la propriété "z-index" permet de contrôler la position de l'élément par rapport aux autres éléments de la page.


Très bonne journée Masterfree 🙃


Florent.

Cette pub permet au site de vivre ...

Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.

Vous pouvez lire à tout moment comment nous utilisons les cookies sur le site.

Utilisation des cookies

Accepter