Positionnement image background sur page Web
Résolu
Daragott
Messages postés
139
Date d'inscription
Statut
Membre
Dernière intervention
-
Daragott Messages postés 139 Date d'inscription Statut Membre Dernière intervention -
Daragott Messages postés 139 Date d'inscription Statut Membre Dernière intervention -
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.
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.
A voir également:
- Positionnement image background sur page Web
- Comment supprimer une page sur word - Guide
- Web office - Guide
- Comment traduire une page web - Guide
- Capture page web - Guide
- Création page web - Guide
15 réponses
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...
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...
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
Norm
Ok merci, j'essaie tout ca demain. Il commence a se faire tard ici ce soir, merci pour tes conseils.
Norm.
Norm.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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
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;
}
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
test avec les dernières versions de chrome firefox et safari les autres sont a oublier
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
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
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;
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;
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
Merci
Norm