Positionnement image background sur page Web [Résolu/Fermé]

Signaler
Messages postés
139
Date d'inscription
dimanche 29 octobre 2006
Statut
Membre
Dernière intervention
10 octobre 2019
-
Messages postés
139
Date d'inscription
dimanche 29 octobre 2006
Statut
Membre
Dernière intervention
10 octobre 2019
-
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.

15 réponses

Messages postés
1945
Date d'inscription
mercredi 25 juin 2008
Statut
Membre
Dernière intervention
11 mai 2014
254
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...
Messages postés
139
Date d'inscription
dimanche 29 octobre 2006
Statut
Membre
Dernière intervention
10 octobre 2019
4
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
Messages postés
1945
Date d'inscription
mercredi 25 juin 2008
Statut
Membre
Dernière intervention
11 mai 2014
254
oui background-repeat surtout que ça ne se termine pas par ; et c'est ennuyeux
Messages postés
139
Date d'inscription
dimanche 29 octobre 2006
Statut
Membre
Dernière intervention
10 octobre 2019
4
Ok merci, j'essaie tout ca demain. Il commence a se faire tard ici ce soir, merci pour tes conseils.

Norm.
Messages postés
139
Date d'inscription
dimanche 29 octobre 2006
Statut
Membre
Dernière intervention
10 octobre 2019
4
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
Messages postés
1945
Date d'inscription
mercredi 25 juin 2008
Statut
Membre
Dernière intervention
11 mai 2014
254
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;
}
Messages postés
1945
Date d'inscription
mercredi 25 juin 2008
Statut
Membre
Dernière intervention
11 mai 2014
254
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
Messages postés
139
Date d'inscription
dimanche 29 octobre 2006
Statut
Membre
Dernière intervention
10 octobre 2019
4
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
Messages postés
1945
Date d'inscription
mercredi 25 juin 2008
Statut
Membre
Dernière intervention
11 mai 2014
254
tu utilise quel version de firefox ?
Messages postés
139
Date d'inscription
dimanche 29 octobre 2006
Statut
Membre
Dernière intervention
10 octobre 2019
4
Firefox 10.0.2. Et c,est la même chose avec Eplorer
Messages postés
139
Date d'inscription
dimanche 29 octobre 2006
Statut
Membre
Dernière intervention
10 octobre 2019
4
Et même chose avec Chrome et Safari
Messages postés
121
Date d'inscription
samedi 28 mai 2011
Statut
Membre
Dernière intervention
25 janvier 2014
31
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;
Messages postés
139
Date d'inscription
dimanche 29 octobre 2006
Statut
Membre
Dernière intervention
10 octobre 2019
4
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
Messages postés
1945
Date d'inscription
mercredi 25 juin 2008
Statut
Membre
Dernière intervention
11 mai 2014
254
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%;
		}
Messages postés
139
Date d'inscription
dimanche 29 octobre 2006
Statut
Membre
Dernière intervention
10 octobre 2019
4
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