[résolu] Positionner une image à partir de la base

Bonjour,

J'ai une image de fond que je souhaiterais positionner à partir de sa base afin de ne pas avoir trop de vide.

Voila ce que ca donne actuellement.
http://bit.ly/knJK7L

et il faut dérouler pas mal pour voir les personnes en bas.

#presentation { 
    background-image: url('/static/image/presentation.png');
    background-repeat: no-repeat; 
    background-size: 100% 100%;
}  

Est ce possible ?
Modifié par senjy (26 May 2011 - 14:35)

Bonjour,

oui en utilisant le " background-position : x y; " ou x et y peuvent prendre plusieurs type de valeurs :
- positionnement en pixels
- positionnement en %age
- positionnement " écrit " ( left top / left bottom ... )

PS : Sur mon écran, je n'ai aucun besoin de dérouler pour voir les personnages.
PS2 : Rapetisser la taille de l'image n'est pas une meilleure solution ?
PS3 : Si tu veux absolument un fond de la couleur de ton image, tu devras rajouter un background-color : taCouleur;
Modifié par n3k0 (26 May 2011 - 11:18)

Bonjour,

Merci pour la réponse ,
Le PS3, m'intéresse .
Comment faire pour que la couleur soit fluide.
C'est a dire que l'image doit elle etre en
PNG ? Ou le jpeg est suffisant ?

Le background-image se positionnera toujours " au dessus " de ton " background-color ", que ton image soit en JPG ou PNG importe peu.

Après, pour ton image, vu qu'il n'y a pas de dégradé ou autre, je pense qu'un JPG de la taille des personnages, sur ton fond, avec en plus un " background-color " irait très bien.


Pour le background, perso j'utilise la synthaxe :
background : url(/static/image/presentation.png) x y no-repeat color;

x et y sont ton background-position ( %age|pixel|nominatif )
no-repeat est ton background-repeat ( repeat-x|repeat-y|repeat|no-repeat )
color est ton background-color ( nom de couleur|transparent|code-couleur )

Voila , j'ai testé mais j'ai du coup un autre soucis.
En effet l'image prends la dimension du texte. et j'aurais voulu qu'elle soit de taille fixe d'une page a l'autre.

#domaine { 
    background-image: url('/static/image/domaine.jpg');
    background-repeat: no-repeat;   
    background-size: 640px 960px;
background-position: center bottom;

Alors ne mets pas de " background-size ", l'image aura sa taille originelle.

Si la taille du conteneur ( #domaine ) ne te convient pas ( trop petite comme actuellement ) tu peux lui rajouter les propriétés css suivantes :

min-height:tailleEnPixel;
height:auto !important;
height:tailleEnPixel;

(ou tailleenPixel est la taille minimale que tu veux)
Modifié par n3k0 (26 May 2011 - 13:44)

Vraiment sympa, ca marche comme je voulais !!

Merci

Vraiment sympa, ca marche comme je voulais !!

Mise a par sous Ie ou il a l'air de prendre toute la taille, et pas le min-height.
Ceci dit ça ne me dérange pas trop

Merci
Modifié par senjy (26 May 2011 - 14:15)

Justement, le min-height sert à donner " une taille minimale " et à prendre plus de place si besoin.

Cette valeur n'est pas prise en compte par toutes les versions de IE, mais ces versions d'IE ( pour une fois ) ont la bonne idée de donner plus de hauteur que la " height " déclarée si on ne met pas de " overflow:hidden;"