28173 sujets

CSS et mise en forme, CSS3

Une image superposée au fond de ma page

Bonjour à tous !

Voila , la je cale un peu Smiley 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 :


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)
Modifié par shantee (08 Oct 2007 - 19:00)
bonjour,
pour cela tu dois attribuer une hauteur de 100% a <html> et ton <body>.
et placer ton image décorative en position:fixed (non implémenté par IE6).
Au passage, il est fortement déconseillé d'avoir des rayures en background,
c'est désagrable et certaines personnes ne le supportent pas.
merci pour ton aide...

alors voila j'ai apporté quelques modifications en m'inspirant de ce que tu m'as di :

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;


}


et j'ai simplifié le code de ma page au maxi pour simplifier (http://shop.pougun.com)

hélas c'est toujours pas ça. Depuis que j'ai ajouté position:fixed;
mon image pousse le contenu vers la gauche . encore plus bizare quand vous "scrollez" vers vers le bas l'image disparait Smiley confus !!

et évidemment quand vous testez sous firefox : RIEN Smiley langue

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

(ah oui et merci pôur ton conseil...en effet mes rayures c'est pas le top va falloir que je trouve autre chose)
Pour les différents bug d'IE7, je ne pourrai pas t'aider.
Attention, tu ne peux pas combiner la propriété float avec la propriété position
qui fait automatiquement prendre à la propriété float la valeur none.
Les z-index négatif n'existent pas.
Pour quoi un height:100% à #bgbas?
A priori ce qui suit devrait suffir (voir les modifications de background)
Quand la valeur est à 0 les unités sont inutiles.

#bgbas {
	position:fixed;
	left:-4px;
	bottom:0;
	height: 674px;
	width: 295px;
	background: url(images/thai_bg.png) no-repeat;
	border:0;
}
Hermann a écrit :

Les z-index négatif n'existent pas.

Are you sure ?

C'est juste pour valider que je suis totalement irrécupérable vis à vis de la langue de Shakespeare (ou non) Smiley cligne
ah ah on se rapproche ! Smiley cligne (lol merci a tous)

regardez ce que je suis arrivé a faire : http://shop.pougun.com/test.html

cool non ? Smiley cligne ...Seul petit problème ...sur firefox impossible de voir toute la page (de plus en plus bizare !!) Smiley bawling

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


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 :

<body>
<div id = "bgbas">
<div id = "container">
le contenu de mon site
</div>
</div>
</body>
Modifié par shantee (01 Oct 2007 - 14:47)
Sujet clos
Aller à