Bonsoir,
Depuis quelques années je crée les layout de mes propres sites en html en utilisant les feuilles de style. Il y a peu j'ai décidé de monter un blog à l'aide de l'outil dotclear (V2) et je me trouve face à deux problèmes par rapport à l'image de fond que je souhaite utiliser.
En premier lieu, l'image est relativement grande mais pas toujours assez pour la longueur d'une page de blog, j'ai donc bien étudié le fonctionnement du thème chez dotclear et j'ai décidé de créer un fond spécifique pour le body faisant 1px de hauteur qui se répèterait en y alors que l'image de fond serait insérée dans le <div> de la page, le code se présente donc comme suit :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| body {
background : #000000;
background-image: url("img/fond1px.png");
background-position: center center;
background-repeat: repeat-y;
font-size : 95%;
font-family : "comic sans ms", "gill sans", arial, sans-serif;
}
#page {
color: #000000;
background-image: url("img/fond.jpg");
background-position: bottom center;
background-repeat: no-repeat;
} |
Lorsque la page est grande, l'effet est parfait, on a donc l'image qui se place en bas entière et au dessus le fond parfaitement cadré comme ici (Ne faites pas attentions aux textes, ils me servaient justement de tests pour vérifier le fonctionnement de mon code).
Cependant lorsque la page est petite je me retrouve avec un bout seulement de l'image en question avec le bas de la page occupé par le fond blanc du body comme ici.
J'ai donc fait différentes tentatives, notamment en fouillant dans le code pour rajouter un nouveau <div> englobant la page afin d'insérer le code du fond blanc à l'intérieur et qu'ainsi ça ne déborde pas, mais ça n'a pas fonctionné, j'ai tenté également de modifier la hauteur de la #page, cela avait un rendu parfait sur le lien qui posait problème mais celui-ci se reportait sur l'autre page.. J'ai également pensé à écrire beaucoup et payer des amis pour qu'ils écrivent de longs commentaires de façon à ce qu'on voit la belle image en entier et qu'il n'y ait plus de problème, mais je me suis dit que cela risquait de couter cher à la fin.
Ce que je souhaiterais (et qui réglerait par la même occasion mes deux problèmes en même temps) c'est avoir sur toutes les pages l'image de fond en entier (avouez que c'est tout de même plus joli que de voir uniquement des pieds, même avec un lapin à côté) mais j'ignore comment faire et s'il est possible de le gérer en utilisant le CSS. Je suis évidemment ouverte à toute autre langage qui me permettrait de régler ce soucis "agaçant" .
Comme conseillé, je vous ajoute le doctype :
1
2
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
Et le content-type :
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Si nécessaire, j'ajouterai à tout ça le dossier complet du layout.
Je vous remercie d'avance pour vos réponses en espérant qu'il existe une solution à mon problème.
Faleya~
Image de fond complète sur toutes les pages
Répondre avec citation
Partager