soucis avec la propriété: background-position

**ivigu** · 30/08/2013, 17h58

bonjour
je me forme sur les langages du web et le css me pose des soucis, bon je tente des choses, actuellement cette propriété me pose des problèmes.
en fait en suivant les tuto w3school, ils expliquent que si on ne veut pas que l'image se répète blablabla. bref.
leur exemple fonctionne comme par hasard bien comme il faut
si moi je teste sur un code de mon cru mon navigateur sur le paramètre:
background-position: bottom right; me colle l'image super haut mais bien a droite (j'ai testé sous chrome et firefox)

exemple de mon code html:

Code html :

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

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>html ccs test</title>
<link type="text/css" rel="stylesheet" href="test2.css"/>
</head>
<body>
	<p>test</p>
</body>
</html>

mon css:

Code :

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

1
2
3
4
5
body{
background-image: url('stocks.jpg');
background-position: bottom right;
background-repeat: no-repeat;
}

je ne fourni pas l'image...
alors pour approfondir un peu ma réflexion j'ai un peu cherché et je suis arrivé sur un autre paramètre: background-origin... mais je me demande si je ne vais pas un peu trop loin...
merci de votre aide

edit: alors en fait non leur outil de démonstration est aussi approximatif que le resultat que j'ai avec mon code... peut etre mon navigateur... je testerai chez moi avec mon firefox, mon opera... je verrai... ++

bon pardon de vous avoir polluer le forum, je viens de trouver le coupable: notepad++, je ne sais pas quel paramètre il rajoute, je sais que des fois il y a un souci de BOM ou autres. donc en retestant avec notepad... ben ça passe.

merci quand même à tout ceux qui aurait pu m'aider.

cdt

**rodolphebrd** · 30/08/2013, 18h35

Envoyé par ivigu

en fait en suivant les tuto w3school

Mauvaise idée ! Ce site comporte des erreurs qui vous desservirons dans votre apprentissage.

**Candygirl** · 30/08/2013, 20h40

Hello,

Le "problème" que tu décris n'a rien à voir avec notepad.
Tu attribues ton background-image à ton body. En la positionnant à droite en bas, elle se place donc en bas droite du body. Or, ton body s'arrête avec ton texte (attribue-lui un border: 1px solid red pour le visualiser). IL est donc logique que ta photo soit "collée en haut".

Attribue un height de 100% à html et body si tu veux qu'elle parte du bas de l'écran même si tu as très peu de contenu.

soucis avec la propriété: background-position [CSS 3]

CSS

Vue hybride

Discussions similaires

Partager

Partager