background image fixe

Version imprimable

11/09/2006, 10h56
Mike35

background image fixe

Bonjour à vous,
j'ai un petit souçi, j'aimerai savoir si il est possible de fixer le background d'une image.
Je m'explique, je souhaiterai que mon image soit affichée entierement sur mon écran.
Le problème est que quand je fais :

Code:

body{background-image: url(monImage.jpg);}

et bien je ne vois pas le bas de mon image. Elle est en quelque sorte coupée.

Y'a t'il une solution ?
11/09/2006, 11h01
MasterOfChakhaL
C'est parce que le corps de ta page n'est pas assez long. L'image est le fond du body, si le body est trop petit, tu ne pourras pas tout voir...

tu peux tenter ceci:
Code:

1 2 3 body { height: 100%; }
11/09/2006, 11h04
Mike35

Ca ne fonctionne pas, j'ai essayé 100%, et rien n'a changé. Meme en essayant 50%, il ne se passait rien non plus
11/09/2006, 11h06
MasterOfChakhaL
Est-ce qu'il y a du contenu dans ta page?

essaye ca pour voir si on part dans la bonne direction;
Code:

1 2 3 4 body { height: 1000px; }
11/09/2006, 11h08
Mike35

Ce ne change absolument rien, j'ai l'impression qu'il ne le prend pas en compte.
11/09/2006, 11h20
DBProg
Salut,

Ton image doit dépasser la taille (verticale) de la page (ie. de ce que le navigateur peut afficher sans utiliser l'ascenceur).

Je ne te conseille pas de mettre une grosse image en fond, car les résolutions sont souvent différentes, et le rendu peut être moyen, voire moche chez certaines personnes.

Mais si tu tiens absolument à faire ça, peurt-être que cette solution fonctionnera :

css
Code:

1 2 3 4 5 6 body { background-image : ... } #fond { height : nnn px (où n est la hauteur de ton image) }
html
Code:

1 2 3 4 5 <body> <div id="fond"> texte ... </div> </body>
11/09/2006, 11h20
MasterOfChakhaL

si tu nous fait voir ton html et ton css, p'tet qu'on trouvera quelque chose qui explique cela...
11/09/2006, 11h34
Mike35

Et bien, ce n'est pas vraiment ce que je veux faire.
Disons que j'ai une image qui est un dégradé foncé en haut et en bas qui s'éclaircit en se rapprochant du milieu.
Donc quand j'affiche mon background-image dans le body, je ne vois pas le dégradé du bas.
A moins biensûr de retoucher mon image et de la mettre aux dimensions souhaitées, mais je veux éviter cela, car tout le monde n'a pas la meme resolution d'ecran et par conséquent ça m'oblige à avoir plusieurs images de fond. (chose que je ne peux pas, car c'est pour de l'embarqué <==> donc peu de place)
11/09/2006, 11h41
DBProg

De toute manière ton fond se verra en fonction du contenu de ta page, plus tu auras de contenu plus la hauteur de la page sera importante, et donc plus ton dégradé se verra.

Sinon tu n'as qu'à réduire la hauteur de ton dégradé en le faisant plus compact. Je ne sais pas à quoi ressemble ton dégradé, mais question poids, tu peux faire une image de quelques pixels seulement qui couvre toute la page (en fond).

1 pièce(s) jointe(s)

Voila mon image. Je sais pas si ça vous aidera ou pas.
Et par rapport au contenu de la page, en fait, l'image ne se redimensionne pas.

Pièce jointe 4622

mon CSS

Code:

1
2
3
4
body {
	background-image: url(Fond.jpg);
	background-repeat: no-repeat;
}

mon HTML

Code:

1
2
3
4
5
6
7
8
9
10
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
hjgljhgkjhgkjhg
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
lhjlkjhlkjhlkjhljkhlkjhlkj
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>

11/09/2006, 13h27
DBProg

Citation:

Envoyé par Mike35

Et par rapport au contenu de la page, en fait, l'image ne se redimensionne pas.

Je ne comprends pas, tu veux que ton image se redimenssione par rapport au texte ? Ce n'est pas possible, en tout cas pas avec cette concéption. Ton image a une hauteur fixe, je ne vois pas comment elle pourrait s'agrandir par magie ! :D
11/09/2006, 13h35
Mike35
Oui effectivement dbprog, je suis désolé, je me suis mal exprimé.
Ceci dit, j'ai trouvé une solution, mais pas miracle non plus. Le seul souçi est qu'il s'agit d'une image située au 1er plan et non en arrière d'ecran.

mon CSS:
Code:

1 2 body {height:100%;width:100%;margin:0;} #fond{height:100%;width:100%;}
mon HTML:
Code:

1 2 3 <body> <img id="fond" src="Fond.jpg" /> </body>
Y'a t'il une possiblilité pour la rendre en arrière plan ?

oui,

tu peux t'inspirer de ca:

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
<html>
	<head>
		<style>
                        #fond {
                                position: absolute;
                                z-index: -1;
                                top: 0;
                                left: 0;
                                height: 100%;                           
                        }
 
                        #bbody {
                                height: 100%;
                                width: 100%;
                                background-color: transparent;
                        }
 
                </style>
	</head>
	<body>
		<img id="fond" src="99.jpg" />
		<div id="bbody">
		aa
		</div>
	</body>
</html>