Taille automatique d'une image en background

[shevalo]

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 :

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;
}

[Bovino]

Salut.

Tu ne peux pas fixer la taille d'une image en background.

[shevalo]

Code :

1
2
3
4
5
6
7
8
9
10
11
12
body {
background-color: #fff;
background: #FFF url('font3.JPG') no-repeat;
background-attachment: fixed ;
background-position-x : auto ;
background-position-y : auto ;
-moz-background-size: 100% ;
background-size: 100% ;
-khtml-background-size:  100% ;
-o-background-size:100%;
-webkit-background-size:100%;
}

j'ai trouvé ça et ça à l'air de marcher....du moins sur un pc 15 pouces et un 17 pouces ca rend bien....

http://www.ride-and-cow.com/main.php


quelqu'un à un très gros écran ou un très petit pour me dire si l'image prend bien toute la place ?

Merci d'avance !

[Bisûnûrs]

Envoyé par shevalo

ça à l'air de marcher

Ca dépend aussi avec quel navigateur. C'est du CSS3 et donc ce n'est pas implémenté sur tous les navigateurs.

[Atomya Rise]

Sur 22" et 19" :

Firefox ---> OK
Opéra ---> Non
IE 8 ---> Ok
Safari ---> Ok

Peut être que cette source pourra éventuellement t'aider... jamais testé....

http://www.webbricks.org/bricks/bgMax/

[shevalo]

Merci beaucoup !