• CSS - Les fonds

    Il existe plusieurs propriétés pour créer un fond. Tout dépend de l'endroit où vous placerez ce fond : dans la page ou dans un objet.


    background-color: valeur;

    Avec cette propriété, vous définirez la couleur de votre fond. Quatre valeurs possibles :

    un nom de couleur (white; black; blue; ...)
    une valeur hexadécimale (#ffffff; #000000; #0000ff; ...)
    un code RGB (rgb(255,255,255); rgb(0,0,0); rgb(0,0,255); ...)
    transparent

    Les noms de couleurs sont très précis et sont peu nombreux (environ 140).
    Une valeur hexadécimale est ce qui permet le plus de possibilités (environ 1,7 millions de couleurs) et le plus répandu comme usage.
    Un code RGB donne le même résultat que la précédente, mais est plus pratique pour ceux qui manipulent beaucoup les photos. A noter toutefois que la plupart des logiciels graphiques donne à chaque couleur RGB sa contrepartie hexadécimale.
    transparent : comme son nom l'indique, il créera un fond transparent qui permettra de "voir" ce qu'il y a au-dessous.

    Exemples :

    Code:
    background-color: rgb(0,255,255);
     
    background-color: #008080;
     
    background-color: transparent;
    background-image: url('valeur');

    Cette propriété vous permet de définir une image en fond de votre objet ou de votre page. Deux valeurs possibles :

    url
    none

    url est bien évidemment l'url de l'image en question. Vous la placerez entre quotes simples ; les guillemets fonctionnent aussi, mais il est utile de prendre dès le début le réflexe de mettre des quotes simples (apostrophes), pour les cas où vous placerez une commande de ce type dans une classe style="..." qui est déjà délimitée par des guillemets.
    none (rien) vous permettra de désactiver sur une page précise l'image de fond que vous avez définie dans la feuille CSS externe.

    Note : Lorsque vous définissez une image en fond, définissez aussi une couleur de fond pour le cas où votre image ne s'afficherait pas.

    Exemples :

    Code:
    background-image: url('url-de-votre-image.jpg');
     
    background-image: url('none');
    background-attachment: valeur;

    Cette propriété, possible uniquement dans une page (balise <body>), vous permet de définir comment se comportera votre image au défilement de la page. Deux valeurs :

    scroll
    fixed

    scroll est la valeur par défaut. L'image défilera avec votre page.
    fixed "fixera" l'image sur votre écran et la page défilera au-dessus.

    Exemple :

    Code:
    background-attachement: fixed;
    background-repeat: valeur;

    Cette propriété va définir comment va se répéter l'image de votre fond de page ou d'objet. Valeurs possibles :

    repeat
    repeat-x
    repeat-y
    no-repeat

    repeat est la valeur par défaut. L'image se répétera autant de fois que nécessaire pour recouvrir tout le fond de votre page ou de votre objet, horizontalement et verticalement.
    repeat-x répétera l'image uniquement horizontalement.
    repeat-y répétera l'image uniquement verticalement.
    no-repeat n'affichera l'image qu'une seule fois.

    Exemple :

    Code:
    background-repeat: no-repeat;
    background-position: valeur;

    Cette propriété vous permet de positionner très précisément votre image dans votre page-écran. Les coordonnées sont proportionnelles au coin gauche-supérieur et au coin droit-inférieur de la fenêtre de votre navigateur. En principe, pour que cette propriété fonctionne correctement dans tous les navigateurs, la propriété background-attachment doit être sur "fixed". Valeurs possibles :

    top left
    top center
    top right
    center left
    center center
    center right
    bottom left
    bottom center
    bottom right
    x% y%
    x-pos y-pos

    top left positionnera votre image dans le coin supérieur gauche de votre écran.
    top center positionnera votre image en haut de votre écran et au centre horizontalement.
    top right positionnera votre image dans le coin supérieur droit de votre écran.
    center left positionnera votre image au centre verticalement sur le côté gauche de votre écran.
    center center positionnera votre image au centre exact de votre écran.
    center right positionnera votre image au centre verticalement sur le côté droit de votre écran.
    bottom left positionnera votre image dans le coin inférieur gauche de votre écran.
    bottom center positionnera votre image en bas de votre écran et au centre horizontalement.
    bottom right positionnera votre image dans le coin inférieur droit de votre écran.
    Pour l'ensemble de ces valeurs, si vous ne mettez qu'une seule valeur, la seconde sera "center" par défaut.

    x% y% positionnera votre image à x% du bord gauche de votre écran et à y% du bord supérieur. Si vous ne mettez qu'une seule valeur, la deuxième sera à 50% par défaut.

    x-pos y-pos positionnera votre image à x (unité) du bord gauche et à y (unité) du bord supérieur de votre écran. Si vous ne mettez qu'une seule valeur, la deuxième sera à 50% par défaut. L'unité peut être, entre autre, des centimètres (cm), des millimètres (mm), des pixels (px), des points (pt).

    Vous pouvez mixer les valeurs de pourcentage et de longueur.

    Exemples :

    Code:
    background-position: center center;
     
    background-position: 20% 50%;
     
    background-position: 200px 50px;
     
    background-position: 50% 2cm;
    Exemple complet :

    Code:
    body {
    background-color: white;
    background-image: url('url-de-votre-image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    }
    Exemple pour désactiver sur une page précise l'image définie dans la balise <body> de la feuille CSS. Vous mettrez dans la page en question, dans sa balise <body> :

    Code:
    <body style="background-image: url('none')">
  • Donations Dons

    Si vous aimez ce site et que vous souhaitez nous supporter, vous pouvez effectuer un don. Tous les dons sont gracieusement acceptés.

    Indiquez la valeur souhaitée au format « xx.xx ».


    Sélectionnez votre monnaie et le montant du don que vous souhaitez effectuer, puis cliquez sur l'image ci-dessous.

  • Horloge

  • Calendrier

    Mars   2024
    Di Lu Ma Me Je Ve Sa
    1 2
    3 4 5 6 7 8 9
    10 11 12 13 14 15 16
    17 18 19 20 21 22 23
    24 25 26 27 28 29 30
    31
  • Derniers mods Derniers mods

    [Additions majeures] - vbBux &...
    - par Dadoo

    [Chat] - Demande de...
    - par lasilix

    [Portails] - vBadvanced...
    - par Dadoo

    [Additions majeures] - Librairie de...
    - par Dadoo

    [Additions majeures] - microNEWSLETTER...
    - par Dadoo

    [Additions majeures] - Tournois &...
    - par Dadoo

    [Additions majeures] - Clavier Virtuel
    - par Greggg

    [Outils d'administration] - Envoyer un...
    - par Greggg

    [Outils de modération] - Outils de...
    - par Greggg

    [Add-ons] - Copyright...
    - par Greggg