Image en Background ...

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par jer_ref, 3 Octobre 2010.

  1. jer_ref
    jer_ref Nouveau WRInaute
    Inscrit:
    8 Septembre 2010
    Messages:
    26
    J'aime reçus:
    0
    Bonjour,

    Je souhaiterais mettre en haut d'une page une image en background sur 100% de large et 150 de haut.
    Je n'ai pas trouvé la solution en utilisant les CSS, ni en mettant l'image au fonds d'un tableau (je n'ai pas réussi à étirer l'image sur toute la largeur du tableau).

    Merci d'avance si vous pouviez m'aider à résoudre mon pb.

    J.
     
  2. Schwarzer Stern
    Schwarzer Stern WRInaute impliqué
    Inscrit:
    16 Mai 2010
    Messages:
    643
    J'aime reçus:
    1
    Salut,
    En CSS pur, à ma connaissance ce n'est pas possible d'étirer une image de background comme une <img />.
    Si tu ne peux pas utiliser un attribut "background-repeat", et que tu as absolument besoin de cet étirement, il faudra passer par un JS qui détectera la largeur du bloc concerné, pour ensuite appeler l'image correspondante à cette largeur (tu devras donc créer autant d'images différentes que de largeurs "standards" possibles).
    à+

    edit : je viens de tomber sur ça, http://www.webbricks.org/bricks/bgMax/, peut être utile dans ton cas :mrgreen:
     
  3. jer_ref
    jer_ref Nouveau WRInaute
    Inscrit:
    8 Septembre 2010
    Messages:
    26
    J'aime reçus:
    0
    Merci pour votre réponse.

    Je viens finalement de trouver une autre solution qui fonctionne :

    ...
    <body>

    <img style="position:absolute;left:0px;top:0px;width:100%;height:150px;" src="image.jpg" alt=""/>

    <div style="position:absolute;left:0px;top:0px;width:100%;height:100%;">
    contenu de la page .....
    </div>

    </body>
     
  4. franckM
    franckM WRInaute impliqué
    Inscrit:
    15 Novembre 2007
    Messages:
    808
    J'aime reçus:
    0
    Bonsoir,

    oui mais ce que tu fais là ce n'est pas une image de "fond" (background) mais une image en premier plan.
     
  5. jer_ref
    jer_ref Nouveau WRInaute
    Inscrit:
    8 Septembre 2010
    Messages:
    26
    J'aime reçus:
    0
    Ca permet pourtant bien de mettre l'image en arrière plan....
     
  6. Schwarzer Stern
    Schwarzer Stern WRInaute impliqué
    Inscrit:
    16 Mai 2010
    Messages:
    643
    J'aime reçus:
    1
    Même si c'est le cas c'est pas très catholique, m'enfin...
    Par contre, je te conseille de placer l'image en fin de page et de jouer sur le z-index si possible pour éviter que son chargement ne ralentisse celui du contenu de ton site (c'est un détail qui peut avoir son importance).
     
Chargement...
Similar Threads - Image Background Forum Date
La background image du site et la vue en cache de google Débuter en référencement 26 Mars 2018
Background image sous conditions Développement d'un site Web ou d'une appli mobile 8 Avril 2013
Alt sur un background-image css. Développement d'un site Web ou d'une appli mobile 5 Mars 2012
Background-image qui ne s'affiche plus suite REDIR htaccess URL Rewriting et .htaccess 14 Décembre 2011
background-image ou img pour une image Développement d'un site Web ou d'une appli mobile 21 Octobre 2010
CSS 2 image en background Développement d'un site Web ou d'une appli mobile 20 Octobre 2010
Newsletter html et background-image - prise de tête inside Développement d'un site Web ou d'une appli mobile 21 Septembre 2010
inserer une image dans le background de mon site Développement d'un site Web ou d'une appli mobile 30 Juin 2010
2 background-image dans une div Développement d'un site Web ou d'une appli mobile 9 Juin 2010
Images background sont elles référencées ? YouTube, Google Images et Google Maps 30 Avril 2010
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice