Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

FOND de page

A la demande du a.k.a. FD et de BA
Un mini TOTORIAL pour avoir un fond de page FIXE !

Ce n'est pas à la portée de tout le monde, je ne devrais pas dévoiler TOUS mes petits secrets, alors q'un bon livre sur les CSS... bon ok ok ok ok (L'arme fatale 2) ok ok ok...

Commençons par le début, votre page est composée de différents éléments :
Le corps de la page (la page), en anglais le BODY
Et des "colonnes calques" les DIV
Dans votre CSS, il faut rajouter, d'abord au bas de la définition du style BODY, avant l'accolade } qui ferme la définition.

background: url("[l'URLcomplètedevotrefaitchier]");

Même chose pour colonne de gauche "left" et celle de droite "right" et la colonne centrale "center" ET "container"

Pour un fond fixe !

Suffit de rajouter un attribut "fixed" au "background"...

background: url("[l'URLdevotrefaitchier]") fixed;

C'est dur hein ;-)

Commentaires

  • Merci Mister CSS de vos précieux conseils :-)
    Vos précieux conseils sont tellement plus passionnant qu'un bon livre sur les styles css, il ne faut point vous retenir à nous en donner ;) Encore encore...... ;)

    J'aplique de ce pas (j'ai fais sauter le mot de passe)

  • Wéééééééééééééééééééééééééééééé!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    ÇA MARCHE !!!!!!!!!!!!!!!!!!!!!!!!!!!
    (c'est beau, la science, quand même !)

  • (j'ai bien aimé "l'URLcomplètedevotrefaitchier"...)

    N'empêche, il y a encore quelques trucs que tu n'as pas expliqués... Par exemple les puces, ou le motif de fond sur les titres ou au milieu du texte... (ah non d'ailleurs je viens de m'apercevoir qu'au contraire il y a un vide, puisqu'on voit le fond fixe au travers...)
    En bref, pour les Tutos, c'est quand tu veux ! Et je ne pense pas être le seul demandeur ! Avec ça, ton blogorat va exploser ! À mon avis, c'est encore mieux que les photos de cul !

    (encore merci)
    (j'en r'viens pas que ça marche)
    (c'est trop génial)

  • Ah pour la bannière t'as triché : elle est fixe !
    Moi je l'ai faite en gif, pour avoir le fond transparent. J'y ai perdu en couleurs, mais avec mon fond en papier froissé, ça me faisait des raccords vraiments vilains... Tandis que là, évidemment, avec les 'tites zétoiles, c'est beaucoup plus discret !

  • Figure toi que j'ai dû tricher pour la bannière. Je l'avais faite en .png, qui gère super bien la transparence... mais ce foutu Explorer de merde en fait du caca ! Si si, preuve en image sur...http://blogapart.blogspirit.com/archive/2005/02/14/banniere1.html
    Et donc, c'était génial, beau fond transparent fixe de la bannière, t'imagines, c'était vraiment super, jusqu'à ce qu'un ami me téléphone et me dit que j'ai mis une drôle de couleur de fond à ma bannière...
    Regarde, jsutement, tu parles des puces, sur mon Mac, en Safari ou Firefox, elles sont détourées, tandis que sur IE, y'a un petit rectangle bizarre autour... là, je me suis fait plaisir, c'est mon blog après tout, alors, j'ai laissé les png.

  • Tiens c'est vrai, je suis passé en Explorer pour voir et tes puces ont un petit rectangle... pas trop vilain, d'ailleurs !
    Par contre le fond n'est pas fixe à part l'extrême bord alors que chez moi ça marche pour le fond mais pas pour la colonne centrale... T'as dû mettre un motif pour les colonnes et il ne doit pas les gérer, je pense. Moi j'en ai mis un sur le body et j'ai enlevé tout sur les colonnes pour que ce soit transparent. Au départ j'avais mis le motif partout, mais à cause des raccords j'ai été obligé de chercher une solution et je me suis aperçu que ça marchait mieux comme ça.
    En tout cas pour ma bannière en gif c'est impeccable, c'est juste la question des couleurs qui n'est pas terrible. Faut passer en couleurs indexées et parfois le résultat est assez beurk.
    Tiens au fait je ne sais pas si tu t'en es aperçu : je me suis fait une icône personnalisée pour l'adresse... J'ai trouvé la combine sur technoblog bien sûr ! Avec Explorer apparemment ça ne marche pas, mais avec Firefox c'est impeccable. (et d'ailleurs c'est pas juste, pourquoi ça ne marche pas avec explorer alors qu'avec d'autres sites ça marche ?)

  • Le gif, c'est caca, pcq pas assez de couleurs pour faire un fondu, donc t'as des escaliers. Vu les dégradés de couleurs ds mes soucoupes, ça ne marcherait pas.
    Pour l'icône personnaliséede l'adresse, je croyais que ça ne marcherait pas sur BS... merci.
    Normalement, IE devrait gérer les motifs fixes aussi ?!?
    Comme ce n'est pas un sit "pro", et que le blème est avec IE, je m'en fiche ! Je n'aime pas Microsoft. Et étant sur Mac, je peux me permettre de m'en passer le plus svt possible. Sf pour le boulot, où j'ai encore besoin de Word, que j'utilise surtout pour récupérer des textes.

  • Et en plus, ça marche sur IE Mac, tant les PNG, que les colonnes...

  • (c'était juste pour info)
    (pas la peine de s'énerver ;o)

  • j'ménerf pô, j'esplik !

  • J'ai un espace entre la bordure de la colonne centre et la colonne droite, comment faire pour l'enlever?
    Et comment fair epur otter l'espace entre ma bannière et le corps de mon blog?

    Merci :)

  • pffft, j'ai réussi à changer l'arrière plan, mais rien à faire pour le centre et les colonnes... j'fais pourtant ce que tu dis ! c'est pas juste !

  • merci ! ouais tout ça n'était pas clair tout simplement parce que j'utilisais le modèle 4 et qu'il est bp + compliqué que les autres. Depuis que je suis passé au 2, tout est plus simple !
    ;-)

  • salut, ai essayer t'inserer une image fixe sur la page d'acueil du blog , voici le css modifie, mais ca ne marche. .si tu peux me dire ce que tu en penses, d'avance merci, a revanche de charge !!!
    body {
    margin: 0px 0px 20px 0px;
    padding: 0px;
    background-color: #000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    word-spacing: normal;
    text-align: center;
    color: #fff;

    background:url("[http://utopie-avertie.blogspirit.com/images/concert_bastringue.JPG]") fixed;
    }

  • oh lala !!j'ai fait comme c'etait dit! point de resultat! tout blanc! j'ai voulu revenir en arriere et donc j'ai effacé les url etc...et maintenant mon blog est n'importe comment!

  • aril, j'ai regardé ta feuille de styles et il y manque des accolades.
    Les "arguments d'un style sont toujours entre accolades.

    le nom du style {
    ses caractéristiques;
    arguments;
    }

    vérifie bien tous les styles.

  • merci beaucoup je vais aller verifier mais du coup j'ai dû tout recommencer!!! grrrrrr! pô pres de re essayer de mettre un fond de page,j'vous l'dis!mais merci G Mike!

  • et ben si!!! j'ai re essayé!!!! YES!!!!!!CA MAAAAARRRRCCCCHHHHEEEEEE!!!!!!!!!!!!!!!!!!
    merci 1000 fois !!! (j'ai quand meme acheté un bouquin sur le langage HTML!

  • T'as mis le temps;-) Mais tu y est arrivée

  • Faut vraiment pas que je refasse un blog.

  • je n'ai pas mis le temps, je n'avais pas reessayé!!!! non mais!!! lol !et puis il fallait que je trouve un fond qui me plaise!!!!

  • sea salt

  • First time here on your site. I am delighted to find your wonderful website online. Would you please also visit my site?

  • Hello!
    I'm novice here and that's why I need some help.
    Can you give me any info and any links where I can get general help on using forum.
    I think that this info will be usefull for all newbies.
    Thanks!

    P.S. Pardon me for my making this topic in wrong section
    ____
    San Antonio...I'm lovin' it :)

  • Извините если не туда запостил, но чувства переполняют:)
    В субботу была свадьба у друга, классно погуляли, получилось очень насыщенное мероприятие, работали профессионалы, искренне советую если кому то пригодится - отличный свадебный фотограф

  • Фуф, ну я запарился мужики, чесслово.....
    Жена постоянно пилит - давай ремонт сделаем, давай ремонт сделаем
    Сначала стали сами делать, но это такой гемор. То тут обои поедут, то там, шпаклевать это вообще каторга....
    Вообщем наняли вот этих парней и вам советую

Les commentaires sont fermés.