Positionnement image background sur page WebRésolu/Fermé

Question

Bonjour,  
Je suis en train de rebâtir mon ancien site web. Le background n'est pas a mon gout. J'ai eu beau lire sur le forum, et changer les codes sur ma feuille CSS, mais je n'arrive pas a avoir ce que je veux. 

En fait mon image est celle-ci: http://www.x-centricmodels.com/images/textures/Rainbow1.png 

Présentement elle se présente  a répétition sur la page de mon site web, voir ici: http://x-centricmodels.com/ 

J'ai d'autres images, mais le problème est le même. Ce que je voudrais c'est que mon image s'étende a la grandeur de la page au  lieu de se répéter comme elle le fait présentement. 

Voici le code que j,ai sur ma feuille CSS:  
body, html { 
 PADDING-RIGHT: 0px;  
 PADDING-LEFT: 0px;  
 BACKGROUND: url('http://www.x-centricmodels.com/images/textures/Rainbow1.png'); 
background-repeat: 
 PADDING-BOTTOM: 0px;  
 MARGIN: 0px;  
 FONT: 70%/1.5 Verdana, Tahoma, Arial, Helvetica, sans-serif;  
 COLOR: #FFFFFF;  
 PADDING-TOP: 0px;  
 FONT-SIZE:12px; 
    FONT-WEIGHT: bold; 
} 

J'ai essayé plusieurs façons mais rien ne va. Au pire j'ai décentré toutes les boxes sur ma page. Je travaille avec Firefox, mais je vérifie toujours avec Expl-horreur. Merci. 

Norm. 

Configuration: Windows XP, service pack3

Atropa · Answer

bonjour,

background-size: 100% 100%;

voilà la propiété a utiliser !

par contre c'est du css3...

sinon juste une petite remarque au passage. les css EN MAJUSCULE c'est pas jolie...

Daragott · Answer

Merci Atropa la réponse, c'est le script que j ai trouvé qui est fait comme ca désolé. Je ne m'y connais pas assez  en CSS. Est-ce qu'il y a quelque chose que je dois enlever dans cette commande aussi? Merci encore, 

Norm

Atropa · Answer

oui background-repeat surtout que ça ne se termine pas par ; et c'est ennuyeux

Daragott · Answer

Ok merci, j'essaie tout ca demain. Il commence a se faire tard ici ce soir, merci pour tes conseils.

Norm.

Daragott · Answer

Salut, j'ai copier coller ta ligne de code et supprimé ce que tu me conseilles et j'ai toujours le background en 3 parties sur ma page.

Voici ce que ca donne comme code maintenant:

body, html {
	PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px; 
	BACKGROUND: url('http://www.x-centricmodels.com/images/textures/Rainbow1.png');
background-size: 100% 100%; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	FONT: 70%/1.5 Verdana, Tahoma, Arial, Helvetica, sans-serif; 
	COLOR: #FFFFFF; 
	PADDING-TOP: 0px; 
	FONT-SIZE:12px;
    FONT-WEIGHT: bold;
}

Merci

Norm

Atropa · Answer

essai ça :
* {
	padding: 0;
	margin: 0;
}

body {
	background-image: url('http://www.x-centricmodels.com/images/textures/rainbow1.png');
	background-size: 100% 100%;
	font: 70%/1.5 Verdana, Tahoma, Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
}

Atropa · Answer

après ça dépend du navigateur que tu utilises. 

test avec les dernières versions de chrome firefox et safari les autres sont a oublier

Daragott · Answer

Désolé de te dire ca, mais le problème persiste. Je n'ai testé qu'avec Firefox et expl-horreur.

Je croyais que peut-être l'astérisque au début du code était de trop, mais ca ne change rien de l,enlever.

Me semble que peut importe la grandeur de l'image, elle devrait finir par s'étendre sur toute la page, non?

En tk, merci de ton aide.

Norm

Atropa · Answer

tu utilise quel version de firefox ?

Daragott · Answer

Firefox 10.0.2. Et c,est la même chose avec Eplorer

Daragott · Answer

Et même chose avec Chrome et Safari

dwade74 · Answer

Bonsoir 
Si j'ai bien compris tu veut pas que l'image du background se repete quand la personne descend le scrollbar. 
Il suffit de mettre fixed
Exemple : BACKGROUND: url('http://www.x-centricmodels.com/images/textures/Rainbow1.png') fixed no-repeat;

Daragott · Answer

Ce que je veux, c'est d,avoir l'image s'étendre a la pleine grandeur de la page si ca peut se faire bien sur. Sans qu elle soit répétée. Je ne sait pas si je m,explique comme il faut.

Merci

Norm

Atropa · Answer

personnellement ce css me permet d'afficher une image de fond "en plein écran"

		* {
			padding: 0;
			margin: 0;
		}
		
		body {
			background-attachment:fixed;
			background-image: url(bitmap.png);
			background-size: 100% 100%;
		}

Daragott · Answer

Yess, finalement ça fonctionne. Merci infiniment Atropa, Je ne suis pas tellement fort en CSS et sans ton aide précieuse, je n'aurais pas réussi seul. Merci encore

Norm

Positionnement image background sur page Web

15 réponses

Discussions similaires

Newsletters