background image fixe

**Mike35** · 11/09/2006, 10h56

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**MasterOfChakhaL** · 11/09/2006, 11h01

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
body {
  height: 100%;
}

**Mike35** · 11/09/2006, 11h04

Ca ne fonctionne pas, j'ai essayé 100%, et rien n'a changé. Meme en essayant 50%, il ne se passait rien non plus

**MasterOfChakhaL** · 11/09/2006, 11h06

Est-ce qu'il y a du contenu dans ta page?

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
body {
  height: 1000px;
}

**Mike35** · 11/09/2006, 11h08

Ce ne change absolument rien, j'ai l'impression qu'il ne le prend pas en compte.

**DBProg** · 11/09/2006, 11h20

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<body>
<div id="fond">
texte ...
</div>
</body>

**MasterOfChakhaL** · 11/09/2006, 11h20

si tu nous fait voir ton html et ton css, p'tet qu'on trouvera quelque chose qui explique cela...

**Mike35** · 11/09/2006, 11h34

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)

**DBProg** · 11/09/2006, 11h41

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).

**Mike35** · 11/09/2006, 12h03

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.

Nom : Fond.jpg
Affichages : 60
Taille : 26,3 Ko

Nom : Fond.jpg
Affichages : 60
Taille : 26,3 Ko

mon CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

mon HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**DBProg** · 11/09/2006, 13h27

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 !

**Mike35** · 11/09/2006, 13h35

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

mon HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<body>
<img id="fond" src="Fond.jpg" />
</body>

Y'a t'il une possiblilité pour la rendre en arrière plan ?

**MasterOfChakhaL** · 11/09/2006, 13h42

oui,

tu peux t'inspirer de ca:

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

background image fixe

HTML

Discussions similaires

Partager

Partager