Bonjour à tous,
Je suis en ce moment en train de me pencher sur la realisation d'un site de sport de montagne.
Mon idée était la suivante : inserer une image dans le body afin qu'elle soit en fond de toutes les pages avec le contenu centré de la maniere suivante :
Le but étant d'avoir une image en fond qui ne bouge pas, qui reste centrée, et qui s'affiche de la même maniere sur un ecran 10 pouces comme sur un 19 pouces..
En gros, mon menu de gauche (fait en javascript) serait par dessus l'image de fond en transparence (pour l'instant ça marche sans problèmes), mon en tête resterait centré de la même taille que le corps de la page (donc 15% de marge à gauche, 10% à droite) et avec un fond blanc ( c'est OK aussi ), mon corps de la page également 15% à gauche, 10% à droite (OK egalement).
Mais pour l'image de fond, je n'y arrive pas, j'aimerai qu'elle s'affiche de la même maniere sur n'importe quel écran....
Je ne trouve pas comment lui donner une taille en pourcentages dans mon fichier css et faire en sorte que par exemple sur un iphone elle ne se répete pas en hauteur...
Une idée de géni de quelqu'un? un lien?
Merci beaucoup d'avance !
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 body { background-color: #fff; background: #FFF url('font2.JPG') no-repeat ; background-attachment: fixed ; background-position: 50% 50% } .// ---> Mon menu qui se trouve sur la gauche : #leftnav { float: left; width: 15%; height: 100%; padding: 0em; } .// ---> Mon en-tete du site : #top { background-color: #fff; margin-left: 15%; margin-right: 10%; width: 77.7%; } .// ---> ensuite mon contenu général : .contenu { border-top: 1px solid black; background-color: #fff; font-family: "Century Gothic"; width: 75%; margin-left: 15%; margin-right: 10%; padding: 1em; }
Partager