+ Répondre à la discussion Actualité déjà publiée
  1. #1
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 650
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 650
    Points : 91 552
    Points
    91 552
    Billets dans le blog
    20

    Par défaut Astuce CSS : Ajouter plusieurs images de fond au corps de votre document HTML



    Aujourd'hui, Pascale Lambert ne nous propose pas un tutoriel mais plus une astuce. En effet, à l'aide d'un court exemple, elle nous donne une méthode pour ajouter plusieurs images de fond à un document HTML.

    N'hésitez pas à faire part de vos remarques, questions et encouragements à la suite de ce message.

    Voir aussi les cours et tutoriels CSS.

    Merci à elle
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Expert éminent sénior
    Avatar de adiGuba
    Homme Profil pro
    Développeur Java/Web
    Inscrit en
    avril 2002
    Messages
    13 837
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Java/Web
    Secteur : Transports

    Informations forums :
    Inscription : avril 2002
    Messages : 13 837
    Points : 22 786
    Points
    22 786
    Billets dans le blog
    1

    Par défaut

    Salut,


    A noter que les CSS3 autorisent l'utilisation de multiple-background sur un même élément : http://www.w3.org/TR/css3-background/#layering

    Du coup il n'y a plus besoin de multiplier les div :
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    #contenu {
    	background-image: url(houx2.gif), url(houx2.gif), url(houx2.gif), url(houx2.gif);
    	background-position: top left, top right, bottom left, bottom right;
    	background-repeat: no-repeat;
     
    	padding-left: 100px;
    	padding-right: 100px;
    }

    Par contre cela ne fonctionne pas sur tous les navigateurs...

    a++

  3. #3
    Inactif
    Avatar de Kerod
    Profil pro
    Inscrit en
    septembre 2004
    Messages
    11 674
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2004
    Messages : 11 674
    Points : 20 408
    Points
    20 408

    Par défaut

    Et surtout ce n'est pas prêt d'arriver vu que le CSS3 est toujours à l'état d'écriture.

    Donc pour avoir quelque chose de compatible avec tous les navigateurs du moment, il vaut mieux utiliser la méthode décrite par Pascale.

  4. #4
    Expert éminent sénior
    Avatar de adiGuba
    Homme Profil pro
    Développeur Java/Web
    Inscrit en
    avril 2002
    Messages
    13 837
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Java/Web
    Secteur : Transports

    Informations forums :
    Inscription : avril 2002
    Messages : 13 837
    Points : 22 786
    Points
    22 786
    Billets dans le blog
    1

    Par défaut

    Oui je n'ai jamais dit le contraire. Mais c'est quand même implémenté dans les dernières versions des navigateurs modernes. Seul IE est à la traine...

    Il me semble que c'est prévu dans IE9...


    a++

  5. #5
    Inactif
    Avatar de Kerod
    Profil pro
    Inscrit en
    septembre 2004
    Messages
    11 674
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2004
    Messages : 11 674
    Points : 20 408
    Points
    20 408

    Par défaut

    Il n'y a pas de soucis. C'est une solution alternative pour ceux qui souhaitent ne pas faire ce genre de choses. Le seul problème c'est que ce n'est pas compatible tout navigateur (il doit avoir que les dernières version de Opera, Firefox et Safari qui l'implémente).

    Après il y a aussi les solutions avec JavaScript mais c'est lourd et surtout s'il y a une désactivation du JavaScrip ça ne fonctionne plus.

    C'est ça le problème des versions navigateurs, ils devraient forcer leur suppression des postes (je parle des constructeurs ^^).

  6. #6
    Nouveau membre du Club
    Inscrit en
    janvier 2004
    Messages
    30
    Détails du profil
    Informations forums :
    Inscription : janvier 2004
    Messages : 30
    Points : 26
    Points
    26

    Par défaut

    Bonjour,
    J'ai une petite question, pour ma culture perso... pourquoi imbriquer les div?

    Vincent.

  7. #7
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : mars 2008
    Messages : 2 333
    Points : 3 867
    Points
    3 867

    Par défaut

    Citation Envoyé par Vincent BONNAL Voir le message
    J'ai une petite question, pour ma culture perso... pourquoi imbriquer les div?
    As-tu au moins lu l'astuce?
    On va définir quatre cadres imbriqués (hg, hd, bg, bd), puis leur attribuer un background-position adéquat pour que les images se placent aux quatre coins. Les marges définies dans le cadre contenu sont précisées en fonction de la taille de l'image pour ne pas que le texte empiète dessus.
    Je ne réponds pas aux questions techniques par MP.

  8. #8
    Nouveau membre du Club
    Inscrit en
    janvier 2004
    Messages
    30
    Détails du profil
    Informations forums :
    Inscription : janvier 2004
    Messages : 30
    Points : 26
    Points
    26

    Par défaut

    Citation Envoyé par Macmillenium Voir le message
    As-tu au moins lu l'astuce?
    Oui.
    "On va définir quatre cadres imbriqués" est une affirmation. Pourquoi les imbriquer? Étant débutant en CSS, ce genre de subtilité a tendance à n'embrouiller, d'où mon interrogation sous entendue à cette question:est-ce utile d'imbriquer ces div (comme ça alourdi le code HTML, il doit bien y avoir une raison à cela, d'où ma question)

    Vincent

  9. #9
    Expert éminent sénior
    Avatar de adiGuba
    Homme Profil pro
    Développeur Java/Web
    Inscrit en
    avril 2002
    Messages
    13 837
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Java/Web
    Secteur : Transports

    Informations forums :
    Inscription : avril 2002
    Messages : 13 837
    Points : 22 786
    Points
    22 786
    Billets dans le blog
    1

    Par défaut

    Avec les CSS2 tu ne peux définir qu'une seule et unique image par éléments.
    Donc si tu veux "simuler" l'affichage de plusieurs images sur un seul élément, il faut en fait imbriquer plusieurs éléments et appliquer une image sur chacun...


    Les CSS2 ont aboutit à plein de lourdeur comme ceci, qui implique de "bidouiller" le HTML pour obtenir certains rendus ou effets...


    Les CSS3 vont grandement améliorer cela (multiple-backgrounds, border-image, border-radius, ombrages, couleurs alpha, dégradées, ...) mais comme indiqué cela pose le problème de la compatibilité...


    a++

  10. #10
    Nouveau membre du Club
    Inscrit en
    janvier 2004
    Messages
    30
    Détails du profil
    Informations forums :
    Inscription : janvier 2004
    Messages : 30
    Points : 26
    Points
    26

    Par défaut

    Bon... d'accord.
    Je vais faire des essais pour (encore) mieux comprendre. Merci pour ta réponse.

    Vincent.

  11. #11
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2008
    Messages : 2 177
    Points : 2 395
    Points
    2 395

    Par défaut

    Citation Envoyé par Kerod Voir le message
    Et surtout ce n'est pas prêt d'arriver vu que le CSS3 est toujours à l'état d'écriture.
    Salut Kerod
    en fait pas tout à fait > http://www.w3.org/Style/CSS/current-work#background
    Le module comprenant les background est en CR et donc implémentable depuis décembre. C'est un des avantages de la division de CSS3 en plusieurs modules.

    Si la totalité des background n'est pas nécessaire pour l'accessibilité de la page,
    on peut toujours passer par JS (si ça ne nuit pas de manière importantes aus perf d'affichages).

  12. #12
    Expert éminent sénior
    Avatar de adiGuba
    Homme Profil pro
    Développeur Java/Web
    Inscrit en
    avril 2002
    Messages
    13 837
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Java/Web
    Secteur : Transports

    Informations forums :
    Inscription : avril 2002
    Messages : 13 837
    Points : 22 786
    Points
    22 786
    Billets dans le blog
    1

    Par défaut

    Il reste quand même le problème des navigateurs : il faudra attendre au moins IE9 pour voir cela se généraliser un peu...


    a++

  13. #13
    Inactif
    Avatar de Kerod
    Profil pro
    Inscrit en
    septembre 2004
    Messages
    11 674
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2004
    Messages : 11 674
    Points : 20 408
    Points
    20 408

    Par défaut

    Sans compté les réticents qui ne veulent pas changer de navigateur. IE6 est toujours présent dans les administrations

  14. #14
    Expert éminent sénior
    Avatar de adiGuba
    Homme Profil pro
    Développeur Java/Web
    Inscrit en
    avril 2002
    Messages
    13 837
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Java/Web
    Secteur : Transports

    Informations forums :
    Inscription : avril 2002
    Messages : 13 837
    Points : 22 786
    Points
    22 786
    Billets dans le blog
    1

    Par défaut

    Pour les utilisateurs sous IE6, je pense qu'il n'est pas déraisonnable de leurs proposer une version "dégradée" du moment qu'elle reste lisible...

    a++

  15. #15
    Nouveau membre du Club
    Profil pro
    Inscrit en
    novembre 2009
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : novembre 2009
    Messages : 14
    Points : 25
    Points
    25

    Par défaut Problème texte/images avec ce tuto

    Bonjour,

    j'ai reproduit strictement ce tuto, très bien expliqué et je vous livre mon problème :

    si le texte inséré dans "contenu" n'est pas aussi haut que la hauteur de 2 images de côté, les 2 images se chevauchent.

    Quelle serait la meilleure solution pour pouvoir afficher les images aux 4 coins, quelle que soit la hauteur du "contenu" ET quelle que soit la résolution de l'écran ?

    Serait-ce de déclarer la hauteur du "contenu" ? mais si la hauteur de résolution passe de 800 à 1280 ?
    Merci.

  16. #16
    Membre confirmé
    Inscrit en
    janvier 2009
    Messages
    599
    Détails du profil
    Informations forums :
    Inscription : janvier 2009
    Messages : 599
    Points : 602
    Points
    602

    Par défaut

    Modifié

    Mon doctype est celui par défaut du navigateur.

    EDIT :

    L'astuce de pascale fonctionne bien mais il ne faut pas confondre le div contenu avec le div d'encadrement :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    <div id="cadre">
    <div id="hg">
    	<div id="hd">
    		<div id="bg">
       			<div id="bd">
                                  <div id="contenu">blablabla</div>
    			</div>
    		</div>
    	</div>
    </div>
    </div>
    Cliquez ici et reprenez le pouvoir !
    A bas IE !, Google, et le pistage du net, testons DuckDuckGo.com
    Lords Of The Realm II Download : Lords of the realm 2
    Infos en anglais :Ici

  17. #17
    Membre confirmé
    Inscrit en
    janvier 2009
    Messages
    599
    Détails du profil
    Informations forums :
    Inscription : janvier 2009
    Messages : 599
    Points : 602
    Points
    602

    Par défaut

    Une image plus parlante, le div "contenu" encadre le texte et le bouton.
    Le Div cadre encadre tout.

    http://yfrog.com/nccadrep

    Ne faites pas attention au fautes, c'est un exemple rapide qui se passe das subtilités CSS pour les caractères accentués, les apostrophes et Cie
    Cliquez ici et reprenez le pouvoir !
    A bas IE !, Google, et le pistage du net, testons DuckDuckGo.com
    Lords Of The Realm II Download : Lords of the realm 2
    Infos en anglais :Ici

Discussions similaires

  1. [OPENV7] Ajout d'image de fond sur report
    Par aYarX dans le forum Odoo (ex-OpenERP)
    Réponses: 1
    Dernier message: 01/10/2013, 11h54
  2. Réponses: 16
    Dernier message: 06/10/2010, 20h46
  3. [ZF 1.9] ajouter une image dans fond de la page
    Par blaise4714 dans le forum Zend Framework
    Réponses: 6
    Dernier message: 24/09/2009, 14h13
  4. [CS3] Ajouter une image de fond a un header sur une page HTML
    Par Altesse-972 dans le forum Dreamweaver
    Réponses: 2
    Dernier message: 16/01/2009, 11h25
  5. [CSS] Redimensionner l'image de fond dans un champ input
    Par choubiroute dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 19/01/2006, 11h25

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo