https://notes.cousumain.info/ fr SPIP - www.spip.net https://notes.cousumain.info/sites/notes.cousumain.info/local/cache-vignettes/L144xH69/siteon0-5f183.png?1688285038 https://notes.cousumain.info/ 69 144 https://notes.cousumain.info/Une-photos-fixe-en-plein-ecran https://notes.cousumain.info/Une-photos-fixe-en-plein-ecran 2026-05-20T15:05:19Z text/html fr jeanmarie CSS <p>Le html avec une image sélectionnée via le formulaire de config du plugin : <BOUCLE_image_entete_accueil(DOCUMENTS) id_document=#CONFIGsf/image_entete_accueil tous extension==jpg|png|gif 0,1> <div id="visuel-accueil"> [(#FICHIER|balise_img|adaptive_images2000)] </div> </BOUCLE_image_entete_accueil> <br class='autobr' /> Le css : #visuel-accueil position : fixed ; top : 0 ; left : 0 ; z-index : -10 ; width : 100% ; height : 100vh ; overflow : hidden ; #visuel-accueil picture width : (…)</p> - <a href="https://notes.cousumain.info/-Notes-" rel="directory">Notes</a> / <a href="https://notes.cousumain.info/+-CSS-+" rel="tag">CSS</a> <div class='rss_texte'><p>Le html avec une image sélectionnée via le formulaire de config du plugin :</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><BOUCLE_image_entete_accueil(DOCUMENTS) {id_document=#CONFIG{sf/image_entete_accueil}} {tous} {extension==jpg|png|gif} {0,1}> <div id="visuel-accueil"> [(#FICHIER|balise_img|adaptive_images{2000})] </div> </BOUCLE_image_entete_accueil> </code></pre></div> <p>Le css :</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>#visuel-accueil { position: fixed; top: 0; left: 0; z-index: -10; width: 100%; height: 100vh; overflow: hidden; } #visuel-accueil picture { width: 100%; height: 100%; } #visuel-accueil img { object-fit: cover;width: 100%; height: 100%; } </code></pre></div> <p>Exemple : <a href="https://sofianechalal.com/" class="external external auto" rel="nofollow external">https://sofianechalal.com/</a></p></div> https://notes.cousumain.info/Titre-avec-liserets-a-droite-et-gauche https://notes.cousumain.info/Titre-avec-liserets-a-droite-et-gauche 2014-12-29T14:05:14Z text/html fr jeanmarie CSS <p>Effet voulu : .h2 overflow : hidden ;position : relative ;padding:0 ;text-align:center ;font-size:1.15em ;color :#aaa ;text-transform:uppercase ; .h2:before, .page_sommaire .sommaire .h2:after position : absolute ;top : 50% ;width:50% ;margin-left:1em ;content : "" ;border-bottom : 1px solid #ddd ; .h2:before margin-left : calc(-50% - 1em) ;</p> - <a href="https://notes.cousumain.info/-Notes-" rel="directory">Notes</a> / <a href="https://notes.cousumain.info/+-CSS-+" rel="tag">CSS</a> <div class='rss_texte'><p>Effet voulu :</p> <div class='spip_document_1 spip_document spip_documents spip_document_image spip_documents_center spip_document_center'> <figure class="spip_doc_inner"> <img src='https://notes.cousumain.info/sites/notes.cousumain.info/local/cache-vignettes/L327xH36/clipboard01-aa0a8.jpg?1692996437' width='327' height='36' alt='' /> </figure> </div><div class='precode'><pre dir='ltr' style='text-align: left;' class="css"><code>.h2 {overflow: hidden;position: relative;padding:0;text-align:center;font-size:1.15em;color:#aaa;text-transform:uppercase;} .h2:before, .page_sommaire .sommaire .h2:after {position: absolute;top: 50%;width:50%;margin-left:1em;content: "";border-bottom: 1px solid #ddd;} .h2:before {margin-left: calc(-50% - 1em);}</code></pre></div></div>