CSS

Logo dans un background existant

Résolu

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: 0left: 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

507 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

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 ...