28172 sujets

CSS et mise en forme, CSS3

Background position: à droite dans tout les cas

Bonsoir,

Je suis en train de réaliser l'apparence de mon projet tutoré et un de mes test me laisse perplexe:

J'ai une image de fond que j'aimerait placé en haut à droite de ma page. Jusque ici pas de problèmes, voila mon code :

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > 
	<head>
		<title>Test background position right</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>
	<body>
	</body>
</html>


style.css

body {
	background-image:url(../images/background.png);
	background-color:#FFFFFF;
	background-repeat:no-repeat;
	background-position:top right;
	margin:0px;
	padding:0px;
}


et mon image de fond en pièce jointe pour la forme ^^.
upload/8968-background.png
Mais en testant différente résolution avec un div de (grande) taille fixe à l'intérieur (1150px) je me suis aperçu d'un petit problème :

En effet lorsque l'on charge la page l'image ce place dans le coin de la partie affiché et lorsque l'on scroll vers la droite l'image ne bouge pas laissant un vide dans le coin qu'elle était censé occupé.

Après des test infructueux je post ici en espérant trouver un libérateur ^^.

Bonne soirée , et merci pour vos réponses je suis bien entendu disponible pour répondre à toute question.
Modifié par Jiraya sama (07 Feb 2010 - 19:18)
le voila même si ça n'as aucune utilité :

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > 
	<head>
		<title>Test background position right</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>
	<body>
		<div id="content">
		</div>
	</body>
</html>


css/style.css

body {
	background-image:url(../images/background.png);
	background-color:#FFFFFF;
	background-repeat:no-repeat;
	background-position:top right;
	margin:0px;
	padding:0px;
}
 #content {
	width:1150px;
	height:50px;
	border:1px solid black;
 }


Je ne vois pas trop ce que ça change le problème ne venant pas de ce div.
Salut,

si j'ai bien compris ce que tu veux il te manque :
background-attachment: fixed;
Ce qui donne en écriture abrégée :
body {
	background: #fff url(../images/background.png) no-repeat right top fixed; 
    margin: 0; 
    padding: 0;
}

Modifié par Heyoan (07 Feb 2010 - 20:57)
Sinon il y a des choses à voir du côté de body {display: table; width: 100%;}, par exemple.
Je vais tester ça sur le champs ça résoudra peut être mon problème et si oui je note ça tout de suite ^^

Edit: c'est parfait Smiley eek Un grand merci de un pour avoir résolu ce problème et de deux pour m'avoir remis en mémoire que display ne se limite pas à block et inline ^^.
Modifié par Jiraya sama (08 Feb 2010 - 08:55)
Jiraya sama a écrit :
Je vais tester ça sur le champs ça résoudra peut être mon problème et si oui je note ça tout de suite ^^

Le mieux serait encore de comprendre le comportement dans un cas et dans l'autre. Smiley smile
Umh après avoir lu les différents articles sur le sujet je n'ai pas vraiment bien compris la diffèrence. Quelqu'un serait en mesure de m'expliquer ?
Sujet clos
Aller à