Discussion :

[shantee]

Bonjour à tous !

Voila , la je cale un peu [sweatdrop] ...
Je suis en train de faire ce site : http://www.made-in-thailand.fr
Comme vous voyez j'ai mi un fond a ma page comme ça :

Code :

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

1
2
3
4
5
6
7
8
 
body {
margin:5px auto 5px auto;
background: url(images/bgstripes.png); 
text-align:center;
padding:0;
background-color: #34A3F3; 
font-family:Arial, Helvetica, sans-serif;}

Et j'aimerai maintenant pouvoir afficher une image tout en bas a gauche de ma page. Mais voila il faudrait que cette image (décorative) :

- Soit fixe (qu'elle reste toujours en bas a gauche de la fenêtre peu importe la hauteur de ma page)
- Qu'elle ne pousse pas mon contenu vers la gauche (donc elle se placerait gentiement en dessous de mon contenu si l'écran de mon visiteur est trop petit)
- et ...ben voila c'est tout ..est ce que c'est possible ou j'en veux trop ?

Comme vous pouvez le voir j'ai déjà fai une piêtre tentative, mais c'est pas encore ça hélas (L'image n'est pas absolument en bas a gauche)

[cadoudal56]

Hello,

Pour placer ton image en bas a gauche, tu dois la mettre en background.
Et tu dois spécifier sa position :

Code :

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

1
2
3
 
background: url(images/bgstripes.png);
background-position:bottom right;

La feuille de style css background-position peut prendre la valeur de :
- numerique (1px 1px) première valeur correspond à sa position sur l'axe X et la seconde correspond à sa position sur l'axe Y. X et Y peuvent être en % ou Pixel.
- top left ou left top , '0% 0%'.
- top
- top center, ou center top , '50% 0%'.
- right top ou top right , '100% 0%'.
- left
- left center, ou center left , '0% 50%'.
- center ou center center , '50% 50%'.
- right
- right center, ou center right , '100% 50%'.
- bottom left ou left bottom , '0% 100%'.
- bottom
- bottom center, ou center bottom, '50% 100%'.
- bottom right ou right bottom , '100% 100%'.

@+
cadou

[shantee]

merci pour ton aide

En fait la propriété background-position sert a positionner l'image a l'intérieur de l'élément qui la contient ...et moi ce qui me pose problème c'est justement l'élément qui la contient (mon <div id="bgbas">)

voici mon CSS

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
 
html {height:100%;}
 
body {
height:100%;
margin:5px auto 5px auto;
background: url(images/bgstripes.png);
text-align:center;
padding:0;
background-color: #34A3F3; 
font-family:Arial, Helvetica, sans-serif;}
 
#bgbas {
height:100%;
	position:fixed;
	float:left;
	background: url(images/thai_bg.png) bottom left no-repeat;
	background-attachment:fixed;
	border:0px;
	z-index:-1;
 
	left:-4px;
	bottom:0px;
	height: 674px;
	width: 295px;
 
 
}

(#bgbas -> ça c'est pour mon image décorative)

j'ai simplifié le code de ma page au maxi pour simplifier (http://www.made-in-thailand.fr)

hélas c'est toujours pas ça.
mon image pousse le contenu vers la gauche . encore plus bizare quand vous "scrollez" vers vers le bas l'image disparait !!

et évidemment quand vous testez sous firefox : RIEN

Bon je m'accorche si quelqu'un a autre chose proposer ..

[Gf6HqmTW]

Malheureusement sans avoir recours à un fichier de comportement je crains que ce ne soir pas possible uniquement en CSS si on en croit "More Eric Meyer On CSS"
Et pour les fichiers de comportement je ne suis certainement pas assez calé pour t'en parler ceci dit on est nombreux ici alors avis aux gens instruits ?

[shantee]

Fichiers de comportement ?
ça doit forcément étre possible en CSS

d'ailleurs je crois que je me rapproche !

regardez ce que je suis arrivé a faire : (test sur mon annuaire)

cool non ? ...Seul petit problème ...sur firefox impossible de voir toute la page. le texte ne continu pas (pas de scrolling)

voici les changement de mon css si ça peut en inspirer certains :

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
 
html {height:100%;
}
body {
height:100%;
margin:5px auto 5px auto;
background: url(images/bgstripes.png) fixed;
 
text-align:center;
padding:0;
background-color: #34A3F3; 
font-family:Arial, Helvetica, sans-serif;}
 
#bgbas {
position:fixed;
 
background:url(images/thai_bg.png) fixed no-repeat bottom left;
	width:100%;
	height:100%;
	border:0;
}

et dans mon html j'ai fai ça en gros :

Code :

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

1
2
3
4
5
6
7
<body> 
<div id = "bgbas">
<div id = "container">
le contenu de mon site
</div>
</div>
</body>