• Image en Fond de blog extensible

    <CSS pour que l'image de fond de blog s'adapte aux dimensions de la fenetre ( ou écran) du visiteur.

    comme la plage paradisiaque sur le blog de Mike

    --

     Concernant les caractéristiques de l'image :

    1. poids à surveiller  (< à 400 ko)  pour éviter de rallonger le temps d'ouverture de la page d'accueil du blog.
    2. taille : rectangulaire comme la plupart des écrans et assez grande  pour éviter la pixélisation sur les grands écrans qui peuvent être de 2000px par 1400px.

                                            Conseils sur le site Alsacréations

    L'image doit être placée en image de fond de fenêtre ( body) via l'interface "modifier le thème"

    Concernant le code CSS à ajouter :

     

     

    D'ailleurs, les marges, la position, le no-repeat et le fixed peuvent se règler aussi via l'interface "modifier le thème", au moment d'envoyer son image dans "fond de fenetre":

    Fond de blog extensible

     

    Il suffit ainsi d'ajouter uniquement via "ajouter du CSS"

     

    « CSS Couleurs pour nuage tagfaire pivoter une image »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags :
  • Commentaires

    1
    Mercredi 1er Octobre 2014 à 18:35
    Bonjour
    es ce que je dois coller ce code à la suite de celui mis en premier par l'installateur ?
    Mon écran est de de 2259X1271 donc très grand et l'image de fond est à en quart
    Merci pour ces informations
    bonne soirée
    2
    Jeudi 2 Octobre 2014 à 10:41

    Bonjour Maire, 

    oui, tu colles ce code dans "ajouter du CC", sur la ligne après  la dernière ligne de code qui apparait dans la petite fenêtre.

    /******Fond extensible******/
    #body {
    margin:0;
    padding:0;
    background-size: cover;
    -webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */ }
    /***** Fin FondExt*****/

    L'image que tu as mise en fond via l'interface "modifier le thème" fait 1900px de largeur donc ne devrait pas trop 'pixelliser'  sur ton écran de 2200px de large...
    Maais tu sais, ton écran est grand et tout le monde n'en a pas un si grand ( si tu as installé les statistiques degoogle, tu peux connaitre la résolution écran la plus utilisée par tes visiteurs). Pour dire que , actuellement , avec une image de fond de 1900px de large et non extensible , la bande blanche sur le coté n'est peut-être pas visible pour la majorité des visiteurs

    3
    Vendredi 14 Novembre 2014 à 18:48
    Donc ce que je dois faire c'est copié collé le code dans le CSS est rajouté l'adresse du fond de mon blog? Donc moi je le veux en fix je dois donc rajouter "fixed" mais où? A oui est l'adresse je là met à quelle endroit stp?

    En fait je viens à penne de comprendre le fonctionnement est les base du css...Et c'est encore un peux délicat ^^"
    4
    Vendredi 14 Novembre 2014 à 18:58
    Tu peux insérer ton image de fond ainsi que faire les réglages de fixe, non répétée etc dans la fenêtre "personnalisation du thème" et
    ajouter uniquement dans le CSS le code qui est dans le dernier cadre de l'article
    5
    Vendredi 14 Novembre 2014 à 19:02
    A bon? Je ne savais pas qu'ont pouvais le faire...Donc j'ai pas besoin de mettre l'url dans le code css? J'ai juste à le copier coller dans mon blog?
    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    6
    Vendredi 14 Novembre 2014 à 19:10
    La fenêtre "personnalisation du thème" est en fait un éditeur de CSS. Quand tu envoies dans la fenêtre l'image et que tu règles les paramêtres "non répétée" et "attachement "fixe" et bien dans ton CSS sur ton blog, l'éditeur va automatiquement écrire:
    background-image: url("adresse de ton image");
    background-repeat: no-repeat;
    background-attachment: fixed;
    Par contre, le
    background-size: cover; ( qui fait le fond extensible) ça, dans "modifier le thème", tu ne peux pas lui demander de l'écrire donc il te faut aller l'ajouter toi-même via le "ajouter du CSS"
    7
    Vendredi 14 Novembre 2014 à 19:52
    A ok c'est bon j'ai compris, merci grâce à toi je dirais moins bête ce soir! Donc là je dois juste le copier coller dans le CSS c'est tout?
    8
    Vendredi 14 Novembre 2014 à 20:37
    Ajoute dans le CSS ( j'ai rajouté au code présent dans l'article les prefixes necessaires parfois à certains navigateurs)
    /*fond extensible*/
    #body {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    }
    /*fin fond extensible*/
    9
    Vendredi 14 Novembre 2014 à 21:00
    Je colle ça demain là je suis sur mon portable, merci pour les explications !

    Ton blog est super pour les gens qui veulent s' améliorer en codage !
    10
    Samedi 15 Novembre 2014 à 12:48
    C'est bon j'ai mie le code merci ! ^^
    11
    Jeudi 9 Juin 2016 à 16:17

    Bonjour je soushaiterais savoir comment je peux creer une page html et metre en fond d'ecrant une image merci

    12
    Samedi 27 Novembre 2021 à 21:34

    J'ai réussi grâce à vous, je vous en remercie infiniment.



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl