Bavardages » CSS: placer une image en filigrane
CSS: placer une image en filigrane
Publié le 17/01/2007 @ 08:50:46,
Par MonkyBonjour,
Je ne suis pas un pro du CSS. J'ai un fichier en licence GPL que j'ai un peu modifié. Mais je pédale un peu dans la choucroute pour insérer un logo en filigrane centré sur la page. Je ne comprends pas bien comment m'y prendre. Disons que l'image en question s'appelle logo.jpg. Je vous copie le code en question. Désolé de faire appel à vous de cette manière, je sais que vous n'êtes pas un Helpdesk.
Si quelqu'un néanmoins se sens l'âme ouverte, je suis toute ouïe. Voici le code:
Je ne suis pas un pro du CSS. J'ai un fichier en licence GPL que j'ai un peu modifié. Mais je pédale un peu dans la choucroute pour insérer un logo en filigrane centré sur la page. Je ne comprends pas bien comment m'y prendre. Disons que l'image en question s'appelle logo.jpg. Je vous copie le code en question. Désolé de faire appel à vous de cette manière, je sais que vous n'êtes pas un Helpdesk.
![:shy: :shy:](images/smileys/shy.gif)
/* standard elements */
* {
margin: 0;
padding: 0;
}
a {
color: #F70;
}
a:hover {
color: #C60;
}
body {
background: #0094D6 url(img/bg.gif) repeat-x;
color: #466;
font: normal 80% "Lucida Sans Unicode",sans-serif;
margin: 0;
}
input {
color: #555;
font: normal 1.1em "Lucida Sans Unicode",sans-serif;
}
p,cite,code,ul {
font-size: 1.2em;
padding-bottom: 1.2em;
}
h1 {
font-size: 1.4em;
margin-bottom: 4px;
}
code {
background: url(img/bgcode.gif);
border: 1px solid #F0F0F0;
border-left: 6px solid #39F;
color: #555;
display: block;
font: normal 1.1em "Lucida Sans Unicode",serif;
margin-bottom: 12px;
padding: 8px 10px;
white-space: pre;
}
cite {
background: url(img/quote.gif) no-repeat;
color: #666;
display: block;
font: normal 1.3em "Lucida Sans Unicode",serif;
padding-left: 28px;
}
h1,h2,h3 {
color: #06C;
padding-top: 6px;
}
/* misc */
.clearer {
clear: both;
}
/* structure */
.container {
background: url(img/topleft.gif) no-repeat;
}
.header {
height: 92px;
}
/* title */
.title {
float: left;
padding: 28px 0 0 76px;
}
.title h1 {
color: #FFF;
font: normal 2em Verdana,sans-serif;
}
/* navigation */
.navigation {
float: left;
height: 92px;
margin-left: 24px;
padding: 0 16px;
}
.navigation a {
color: #FFF;
float: left;
font: bold 1.2em "Trebuchet MS",sans-serif;
margin-top: 56px;
padding: 8px 18px;
text-align: center;
text-decoration: none;
}
.navigation a:hover {
background-color: #4A91C3;
color: #FFF;
}
/* main */
.main {
background: #FFF url(img/bgmain.gif) no-repeat;
clear: both;
padding: 12px 12px 0 52px;
}
/* main left */
.sidenav {
float: left;
width: 24%;
}
.sidenav h1 {
border-bottom: 1px dashed #DDD;
color: #E73;
font-size: 1.2em;
height: 20px;
margin-top: 1.2em;
}
.sidenav ul {
margin: 0;
padding: 0;
}
.sidenav li {
border-bottom: 1px dashed #EEE;
list-style: none;
margin: 0;
}
.sidenav li a {
color: #777;
display: block;
font-size: 0.9em;
padding: 3px 6px 3px 18px;
text-decoration: none;
}
.sidenav li a:hover {
color: #111;
background: url(img/nav_li.gif) no-repeat;
}
/* content */
.content {
float: left;
margin-right: 4%;
width: 69%;
}
.content .descr {
color: #C60;
margin-bottom: 6px;
}
.content li {
list-style: url(img/li.gif);
margin-left: 18px;
}
/* search form */
.styled {
border: 3px double #E5E5E5;
padding: 2px 3px;
}
.button {
border: 1px solid #AAA;
margin-left: 5px;
padding: 2px 3px;
}
/* footer */
.footer {
background: #0094D6 url(img/bgfooter.gif) repeat-x;
color: #C1DEF0;
font-size: 1.1em;
line-height: 40px;
text-align: center;
}
.footer a {
color: #FFF;
text-decoration: none;
}
.footer a:hover {
color: #FFF;
text-decoration: underline;
}
* {
margin: 0;
padding: 0;
}
a {
color: #F70;
}
a:hover {
color: #C60;
}
body {
background: #0094D6 url(img/bg.gif) repeat-x;
color: #466;
font: normal 80% "Lucida Sans Unicode",sans-serif;
margin: 0;
}
input {
color: #555;
font: normal 1.1em "Lucida Sans Unicode",sans-serif;
}
p,cite,code,ul {
font-size: 1.2em;
padding-bottom: 1.2em;
}
h1 {
font-size: 1.4em;
margin-bottom: 4px;
}
code {
background: url(img/bgcode.gif);
border: 1px solid #F0F0F0;
border-left: 6px solid #39F;
color: #555;
display: block;
font: normal 1.1em "Lucida Sans Unicode",serif;
margin-bottom: 12px;
padding: 8px 10px;
white-space: pre;
}
cite {
background: url(img/quote.gif) no-repeat;
color: #666;
display: block;
font: normal 1.3em "Lucida Sans Unicode",serif;
padding-left: 28px;
}
h1,h2,h3 {
color: #06C;
padding-top: 6px;
}
/* misc */
.clearer {
clear: both;
}
/* structure */
.container {
background: url(img/topleft.gif) no-repeat;
}
.header {
height: 92px;
}
/* title */
.title {
float: left;
padding: 28px 0 0 76px;
}
.title h1 {
color: #FFF;
font: normal 2em Verdana,sans-serif;
}
/* navigation */
.navigation {
float: left;
height: 92px;
margin-left: 24px;
padding: 0 16px;
}
.navigation a {
color: #FFF;
float: left;
font: bold 1.2em "Trebuchet MS",sans-serif;
margin-top: 56px;
padding: 8px 18px;
text-align: center;
text-decoration: none;
}
.navigation a:hover {
background-color: #4A91C3;
color: #FFF;
}
/* main */
.main {
background: #FFF url(img/bgmain.gif) no-repeat;
clear: both;
padding: 12px 12px 0 52px;
}
/* main left */
.sidenav {
float: left;
width: 24%;
}
.sidenav h1 {
border-bottom: 1px dashed #DDD;
color: #E73;
font-size: 1.2em;
height: 20px;
margin-top: 1.2em;
}
.sidenav ul {
margin: 0;
padding: 0;
}
.sidenav li {
border-bottom: 1px dashed #EEE;
list-style: none;
margin: 0;
}
.sidenav li a {
color: #777;
display: block;
font-size: 0.9em;
padding: 3px 6px 3px 18px;
text-decoration: none;
}
.sidenav li a:hover {
color: #111;
background: url(img/nav_li.gif) no-repeat;
}
/* content */
.content {
float: left;
margin-right: 4%;
width: 69%;
}
.content .descr {
color: #C60;
margin-bottom: 6px;
}
.content li {
list-style: url(img/li.gif);
margin-left: 18px;
}
/* search form */
.styled {
border: 3px double #E5E5E5;
padding: 2px 3px;
}
.button {
border: 1px solid #AAA;
margin-left: 5px;
padding: 2px 3px;
}
/* footer */
.footer {
background: #0094D6 url(img/bgfooter.gif) repeat-x;
color: #C1DEF0;
font-size: 1.1em;
line-height: 40px;
text-align: center;
}
.footer a {
color: #FFF;
text-decoration: none;
}
.footer a:hover {
color: #FFF;
text-decoration: underline;
}
CSS: placer une image en filigrane
Publié le 17/01/2007 @ 14:04:09,
Par zionTu voudrais pas plutôt nous montrer la page directement?
Parce que juste le CSS j'ai pas le courage de lire, j'aime bien voir le résultat et le problème avant de me plonger dans le tout
Parce que juste le CSS j'ai pas le courage de lire, j'aime bien voir le résultat et le problème avant de me plonger dans le tout
![:wink: :wink:](images/smileys/wink.gif)
Je suis le Roy
![:ocube: :ocube:](images/smileys/ocube.gif)
CSS: placer une image en filigrane
Publié le 17/01/2007 @ 15:34:11,
Par maxbackground-image url(./images/logo.jpg)
background-repeat: no-repeat;
background-position: center center;
A placer dans le tag ou la classe de ton choix.
Attention que le chemin de l'image est relatif à la page et non pas au css (je dis ça pour si tu places tes feuilles de style dans un repertoire différent que celui de tes pages)
Trololo
CSS: placer une image en filigrane
Publié le 17/01/2007 @ 16:15:35,
Par zionOui mais non, on veut voir la page
![:petrus: :petrus:](images/smileys/petrus.gif)
![:neowen: :neowen:](images/smileys/neowen.gif)
Je suis le Roy
![:ocube: :ocube:](images/smileys/ocube.gif)
CSS: placer une image en filigrane
Publié le 17/01/2007 @ 16:23:40,
Par MonkyVoici la page... sorry pour le retard mais nous avons eu une visite: http://www.radio.annonciation.net
CSS: placer une image en filigrane
Publié le 17/01/2007 @ 16:25:01,
Par Monkybackground-image url(./images/logo.jpg)
background-repeat: no-repeat;
background-position: center center;
A placer dans le tag ou la classe de ton choix.
Attention que le chemin de l'image est relatif à la page et non pas au css (je dis ça pour si tu places tes feuilles de style dans un repertoire différent que celui de tes pages)
Oui, j'ai essayé déjà cela avant de vous écrire mais ça ne passe pas. J'ai l'impression que quelque chose est au-dessus de l'image... ?
CSS: placer une image en filigrane
Publié le 17/01/2007 @ 16:33:29,
Par maxbon, de ce que je vois, il y a déjà une image pour le tag body,
donc on va placer le filigrane ailleurs. div.main serait bien mais il y a aussi une
image:
Heuu, donc soit on rajoute un div dans div.main en plus et on tape l'image là , soit on triche en modifiant l'image et... non c'est casse-bonbon comme méthode, ajoute plutôt une couche...
Dernière édition: 17/01/2007 @ 16:34:19
![http://www.radio.annonciation.net/img/bg.gif http://www.radio.annonciation.net/img/bg.gif](http://www.radio.annonciation.net/img/bg.gif)
donc on va placer le filigrane ailleurs. div.main serait bien mais il y a aussi une
image:
![http://www.radio.annonciation.net/img/bgmain.gif http://www.radio.annonciation.net/img/bgmain.gif](http://www.radio.annonciation.net/img/bgmain.gif)
Heuu, donc soit on rajoute un div dans div.main en plus et on tape l'image là , soit on triche en modifiant l'image et... non c'est casse-bonbon comme méthode, ajoute plutôt une couche...
Dernière édition: 17/01/2007 @ 16:34:19
Trololo
CSS: placer une image en filigrane
Publié le 17/01/2007 @ 16:36:57,
Par MonkyPour les couches, je connais les "premier âge" actuellement... Tu peux me préciser comment ajouter cette couche, si tu as la patience et le temps?
CSS: placer une image en filigrane
Publié le 17/01/2007 @ 16:38:22,
Par MonkyNe serait-ce pas avec ceci: z-index:
CSS: placer une image en filigrane
Publié le 17/01/2007 @ 16:48:42,
Par maxje me suis mal exprimé, j'aurais du dire un cadre.
En schématisant à l'extrême:
<body>
...
<div class="main">
<div class="page"> <---- c'est lui qui va contenir le filigrane
<div des articles>...</div>
</div>
</div>
</body>
Dernière édition: 17/01/2007 @ 16:49:09
En schématisant à l'extrême:
<body>
...
<div class="main">
<div class="page"> <---- c'est lui qui va contenir le filigrane
<div des articles>...</div>
</div>
</div>
</body>
Dernière édition: 17/01/2007 @ 16:49:09
Trololo
CSS: placer une image en filigrane
Publié le 17/01/2007 @ 16:58:52,
Par MonkyOk, je vais me documenter là -dessus ! Merci pour les infos Max. Cela va me prendre quelques jours pour goupiller cela mais je vais tenter la chose...
CSS: placer une image en filigrane
Publié le 18/01/2007 @ 09:50:44,
Par MonkyJ'ai vaincu le problème. En réalité, il fallait placer les données de l'image dans la boite .content
Cela fonctionne.
Voilà le résultat: www.radio.annonciation.net
Dernière édition: 18/01/2007 @ 09:54:50
Cela fonctionne.
Voilà le résultat: www.radio.annonciation.net
Dernière édition: 18/01/2007 @ 09:54:50