Bonjour,
je rencontre un petit soucis dans la création de mon thème CSS pour Dotclear2.
Je voudrais avoir 2 images en background :
une qui soit fixe est qui se répète en X et Y
l'autre qui glisse avec le thème (collé en top middle) et qui soit (évidemment) plus large que le thème de la page.
Un exemple est plus parlant, c'est sur ce site : http://dhampyr.fr/
L'image de fond est du texte qui se répète. L'image qui coulisse est de la déco : lierre et tâches.
(note : les images ne sont pas encore bien optimiser, c'est assez lourd, j'y travail)
Actuellement, je n'ai pas trouver d'autre solution que de mettre la seconde image dans un div plus large que le thème, mais sur un écran de faible résolution, il y a un ascenseur horizontale qui apparait et c'est assez moche.
Comment puis-je faire pour que la seconde image se comporte comme actuellement, mais sans ascenseur ?
le code css actuelle :
je rencontre un petit soucis dans la création de mon thème CSS pour Dotclear2.
Je voudrais avoir 2 images en background :
une qui soit fixe est qui se répète en X et Y
l'autre qui glisse avec le thème (collé en top middle) et qui soit (évidemment) plus large que le thème de la page.
Un exemple est plus parlant, c'est sur ce site : http://dhampyr.fr/
L'image de fond est du texte qui se répète. L'image qui coulisse est de la déco : lierre et tâches.
(note : les images ne sont pas encore bien optimiser, c'est assez lourd, j'y travail)
Actuellement, je n'ai pas trouver d'autre solution que de mettre la seconde image dans un div plus large que le thème, mais sur un écran de faible résolution, il y a un ascenseur horizontale qui apparait et c'est assez moche.
Comment puis-je faire pour que la seconde image se comporte comme actuellement, mais sans ascenseur ?
le code css actuelle :
body {
background: #111 url(img/background.png) repeat left top fixed; /* */
font: 0.8em "Lucida Grande", "Luxi Sans Regular", Verdana, "Luxi Mono Regular", Geneva, "DejaVu Serif Book", Arial, Helvetica, sans-serif;
line-height: 1.6em;
}
#backmotif {
position: absolute;
margin-top: -40px;
margin-left: -330px;
height:1361px;
width: 1665px;
background: url(img/back-motif.gif) center top ;
z-index: -1;
}
