Background-color + background image + background-position
Résolu/Fermé
TuTTIQuanti
Messages postés
2
Date d'inscription
vendredi 27 septembre 2013
Statut
Membre
Dernière intervention
27 septembre 2013
-
Modifié par TuTTIQuanti le 27/09/2013 à 08:53
AssOfBlackMama - 21 mai 2014 à 13:49
AssOfBlackMama - 21 mai 2014 à 13:49
A voir également:
- Background-color + background image + background-position
- Windows 7 logon background changer - Télécharger - Thèmes & Fonds d'écran
- Image iso - Guide
- Ma position - Guide
- Acronis true image - Télécharger - Sauvegarde
- Position gps - Guide
5 réponses
Lerendra
Messages postés
408
Date d'inscription
jeudi 26 septembre 2013
Statut
Membre
Dernière intervention
28 mai 2018
299
27 sept. 2013 à 10:32
27 sept. 2013 à 10:32
#bloc {
background-image: url(../img/mon-image-de-fond.jpg); ( image de fond)
background-color: white; (couleur de fond)
background-repeat: no-repeat; (l'image ne se répète pas)
position:fixed;
top: 50px; (Position d'une image)
right: 50px;
}
N'hésite pas à bien détailler pour mieux s'y retrouver :)
background-image: url(../img/mon-image-de-fond.jpg); ( image de fond)
background-color: white; (couleur de fond)
background-repeat: no-repeat; (l'image ne se répète pas)
position:fixed;
top: 50px; (Position d'une image)
right: 50px;
}
N'hésite pas à bien détailler pour mieux s'y retrouver :)
Bonjour,
la propriété css background est en fait le regroupement de plusieurs propriétés css; il s'agit d'une simple notation raccourcie.
Cela vous devez l'avoir compris mais c'est simplement pour vous signaler que si vous avez un problème de positionnement de l'image de fond c'est une seule propriété qui est concernée.
Autre remarque aussi: parfois il est plus pratique en tout cas plus clair d'utiliser la notation non raccourcie comme ça vous aurez directement e nom des propriétés de style css devant les yeux et c'est plus parlant et plus simple à modifier:
background-color:#ffffff;
background-image: url(monimage.jpg);
background-repeat:no-repeat;
background-position:top left;
Donc maintenant que nous savons que c'est uniquement la dernière ligne qu'il faut modifier intéressons nous à la définition de la propriété de style background-position:
N'importe quel manuel css dit: définit la position de départ de l'image de fond.
Le site du consortium web nous indique aussi(http://www.w3schools.com/cssref/pr_background-position.asp) que la valeur par défaut de cette propriété est de 0% 0%
Ce qui signifie que si nous ne modifions pas la propriété background-position l'image est positionné à 0%(démarre du bord haut de son conteneur) et 0%(démarre aussi du bord gauche).
Donc quand vous indiquez
background-position:top left;
cela n'a aucune incidence et ne pas mettre la propriété revient au même(on voit aussi que la notation raccourcie background oblige à indiquer une position ce qui ne raccourcie ni la lecture ni la lisibilité du code)
Si vous voulez changer la position de l'image de fond vous pouvez utiliser d'autres côtés du conteneur comme indication de départ de l'image(right voudrait dire que l'image commence hors du cadre et donc sert à avoir une image de fond que l'on ne voit pas si la propriété repeat est no-repeat):
Exemples de positionnement qui change la valeur par défaut:
background-position:33% 50%;
l'image commence à 1/3 de la taille horizontale et la moitié de la hauteur.
Vous pouvez utiliser une unité comme le pixel(em) ou quadratin(em) et mélanger ceux ci dans votre déclaration de style css
background-position:10px 2.5em;
ou
background-position:10px 20%;
la propriété css background est en fait le regroupement de plusieurs propriétés css; il s'agit d'une simple notation raccourcie.
Cela vous devez l'avoir compris mais c'est simplement pour vous signaler que si vous avez un problème de positionnement de l'image de fond c'est une seule propriété qui est concernée.
Autre remarque aussi: parfois il est plus pratique en tout cas plus clair d'utiliser la notation non raccourcie comme ça vous aurez directement e nom des propriétés de style css devant les yeux et c'est plus parlant et plus simple à modifier:
background-color:#ffffff;
background-image: url(monimage.jpg);
background-repeat:no-repeat;
background-position:top left;
Donc maintenant que nous savons que c'est uniquement la dernière ligne qu'il faut modifier intéressons nous à la définition de la propriété de style background-position:
N'importe quel manuel css dit: définit la position de départ de l'image de fond.
Le site du consortium web nous indique aussi(http://www.w3schools.com/cssref/pr_background-position.asp) que la valeur par défaut de cette propriété est de 0% 0%
Ce qui signifie que si nous ne modifions pas la propriété background-position l'image est positionné à 0%(démarre du bord haut de son conteneur) et 0%(démarre aussi du bord gauche).
Donc quand vous indiquez
background-position:top left;
cela n'a aucune incidence et ne pas mettre la propriété revient au même(on voit aussi que la notation raccourcie background oblige à indiquer une position ce qui ne raccourcie ni la lecture ni la lisibilité du code)
Si vous voulez changer la position de l'image de fond vous pouvez utiliser d'autres côtés du conteneur comme indication de départ de l'image(right voudrait dire que l'image commence hors du cadre et donc sert à avoir une image de fond que l'on ne voit pas si la propriété repeat est no-repeat):
Exemples de positionnement qui change la valeur par défaut:
background-position:33% 50%;
l'image commence à 1/3 de la taille horizontale et la moitié de la hauteur.
Vous pouvez utiliser une unité comme le pixel(em) ou quadratin(em) et mélanger ceux ci dans votre déclaration de style css
background-position:10px 2.5em;
ou
background-position:10px 20%;
Utilisateur anonyme
Modifié par lobotoFix le 27/09/2013 à 11:06
Modifié par lobotoFix le 27/09/2013 à 11:06
salut, par exemple :
׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º×
<style type="text/css">
#bl{
width: 500px;
height: 500px;
margin: auto;
border: 2px solid black;
background: url(image0.jpg) red 120px 150px no-repeat;
}
</style>
</head>
<body>
<div id="bl"></div>
</body>
׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º×
TuTTIQuanti
Messages postés
2
Date d'inscription
vendredi 27 septembre 2013
Statut
Membre
Dernière intervention
27 septembre 2013
Modifié par TuTTIQuanti le 27/09/2013 à 12:38
Modifié par TuTTIQuanti le 27/09/2013 à 12:38
Merci à vous !
Je ne comprends absolument pas pourquoi cela n'a pas fonctionné avant car, avant d'utiliser background:, j'avais bien évidemment utilisé background color, background image et background position en trois propriétés bien distinctes..
Mais bon,
Le principal est que cela ait fonctionné !
Merci à vous ;)
Je ne comprends absolument pas pourquoi cela n'a pas fonctionné avant car, avant d'utiliser background:, j'avais bien évidemment utilisé background color, background image et background position en trois propriétés bien distinctes..
Mais bon,
Le principal est que cela ait fonctionné !
Merci à vous ;)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Salut pour rebondir sur ce sujet, j'aurais une question ! Alors voilà lorsque je veux mettre une image en background, cela ne marche pas...
Voici ma méthode :
-L'image est dans le meme dossier que mon .css et mon .html
-Mon image s'appelle neige.png
Je fais donc:
body
{
background-image: url("neige.png");
}
J'ai essayé avec tous les formats d'image !
Est ce que les formats de mes images sont trop volumineux ?
L'image devrait s'afficher non ? Je galère trop..
Merci d'avance !
Voici ma méthode :
-L'image est dans le meme dossier que mon .css et mon .html
-Mon image s'appelle neige.png
Je fais donc:
body
{
background-image: url("neige.png");
}
J'ai essayé avec tous les formats d'image !
Est ce que les formats de mes images sont trop volumineux ?
L'image devrait s'afficher non ? Je galère trop..
Merci d'avance !
