18041 sujets

Questions générales et questions de débutants

Positionner une image en bas à gauche

Bonjour à tous!

Je trouve d'habitude toutes les réponses sur le forum mais là je sèche et je ne trouve rien!

Je souhaite positionner une image (Background) en bas à gauche de l'écran.

L'image possède un dégradé qui va sur du noir ce qui me permettra de m'adapter à toutes tailles d'écrans. Mon problème vient du fait que je souhaite aligner le coin en bas à gauche de ma photo au coin en bas à gauche de l'écran.

J'ai utilisé des attributs en % (100% / 0%), bottom left, etc... rien n'y fait !

Est-ce que quelqun à une idée ?

Juste pour expliquer ce que je veux faire: Le rouge est en réalité noir et le dégradé vient se fondre dans la couleur de fond, de ce fait celà s'adaptera à toutes les tailles d'écrans
upload/36879-aligner-en.jpg

Un grand merci parce que là, je sèche !
Bonsoir Laurie-Anne !

Effectivement avec le code ca sera plus simple Smiley smile

Mon code actuellement est:

body {

font: 12px Arial;
color: #FFFFFF;
background: #000000;
background-image: url('../images/001/body_BG.jpg');
background-repeat:no-repeat;
background-position: bottom left;
width: 100%;
height: 100%;
}
Mais j'ai vraiment essayé plusieurs choses, dont le positionnement en %.

Lorsque je mets l'attribut bottom left, l'image disparait... (j'ai vraiment cherché sur plusieurs forum et il me semble que l'attribut bottom left positionne le coin en haut à gauche au bottom left de l'écran. Du coup l'image est hors champ... mais je me trompe sûrement car si c'est le cas je n'en vois pas l'utilité!)

Merci beaucoup!
Bonjour Mabelle !

J'ai essayé:

body {

font: 12px Arial;
color: #FFFFFF;
background: #000000;
background-image: url('../images/001/body_BG.jpg');
background-repeat:no-repeat;
background-position: bottom left;
background-attachment: fixed;

}

Mais ca ne marche pas, l'image n'est toujours pas visible. Smiley decu
Laurie-Anne > Désolé, je ne te suis pas là ?

Tu proposais comme solution "Il faut inverser bottom et left", alors que Timothy avait mis "background-position: bottom left;". Il est vrai que le W3C dit de placer d'abord la valeur horizontale, puis la verticale, mais mon lien montre que les deux fonctionnent si on teste sur TRY IT.
Donc le problème de Timothy est ailleurs, non?
Modifié par lddsoft (15 Mar 2011 - 09:17)
Bonjour !

Merci pour vos réponses !

Le chemin vers mon image est bien juste, en la positionant en haut à gauche l'image apparaît sans problème.

J'ai testé l'inversion de bottom et left, cela ne fonctionne toujours pas. Smiley decu

Merci pour votre aide !
lddsoft > +1

Timothy > Pourrais-tu fournir un peu plus de code, car le problème doit se trouver dans la partie de code que nous ne connaissons pas.
Bonjour lddsoft,

Qu'est-ce qu'il te faudrait de plus comme code ? Est-ce que je peux mettre tout le fichier CSS dans le Forum ? Ca risque d'être un peu indigeste mais je peux sans problèmes Smiley smile

Je peux aussi t'envoyer l'adresse du site si tu veux jeter un coup d'oeil (il s'agit du site d'un client/ami, je n'ai pas tellement envie de mettre l'adresse sur le forum)

Merci beaucoup en tout cas, j'ai passé des heures hier à essayer de faire cet alignement, j'ai dureste testé l'alignement bottom left sur un fichier test, même problème. Soit je fais qqch de faux (ce qui doit être le cas), soit l'alignement bottom left sert à rien car il met l'image hors champ...(je sais je répête mais je suis sidéré de pas réussir à faire qqch qui devrait prendre 1 minute Smiley biggrin )
Ceci marche chez moi en local sur IE8 et Firefox 3.6.15

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test position</title>
<style type="text/css">
body
{
	background-color: #000;
	color: #fff;
	font: 12px arial;
	background-image:url('une_image.gif');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position: left bottom;
	width: 100%;
	height: 100%;

}
</style>
</head>

<body>
<p>TEST de POSITIONNEMENT</p>
</body>
</html>


Il fallait ajouter : background-attachment:fixed;
Modifié par lddsoft (15 Mar 2011 - 10:09)
CLAP CLAP CLAP !

J'ai repris ton code et ca marche , j'ai forcé tous les attributs avec un !important et maintenant c'est tout bon ! J'ai aucune idée de ce qui n'allait pas, mais maintenant ça marche et là je vais être honnête, je vais pas chercher à comprendre ce que je faisais faux Smiley langue

Un grand merci à tous ceux qui m'ont aidé !

Une bière offerte à tous ceux qui passeront par Genève Smiley biggrin

Bonne journée à vous tous !
Je te signale tout de même que Mabelle t'avait donné la solution et que tu as répondu que cela ne fonctionnait pas !
Rendons à Mabelle ce qui appartient à Mabelle Smiley cligne
Sujet clos
Aller à