Les partenaires publicitaires:

Comment faire un fond fixe en CSS

Vous pouvez créer des pages Web avec de nombreuses propriétés de style. En utilisant HTML et CSS (Cascading Style Sheets) vous pouvez spécifier divers différentes règles de style qui déterminent la façon dont votre contenu de page Web apparaît. Parmi les propriétés de style que vous pouvez déclarer en CSS est l'arrière-plan. Vous pouvez définir les propriétés d'arrière-plan pour les éléments et pour la page HTML dans son ensemble. Un fond peut également contenir une image qui peut être répétée pour remplir l'espace disponible et éventuellement fixé de telle sorte qu'il ne bouge pas lorsque l'utilisateur fait défiler la page.

Instructions

  1. Créer votre page Web. Si vous ne possédez pas déjà une page Web construite de l'utilisation de la structure de l'échantillon suivant qui comprend un lien vers une feuille de style externe:




    Voici le contenu de la page

    La page contient un seul élément "div" purement à démontrer. Si vous voulez donner à votre fichier CSS un nom différent, modifier le "lien" élément attribut "href" pour convenir le nom que vous choisissez.

  2. Préparer votre image de fond. Si vous avez déjà un fichier image que vous souhaitez utiliser dans le fond de votre page Web, télécharger à votre serveur Web. Si le fichier d'image est de grande taille que vous souhaitez peut-être optimiser pour réduire la quantité de temps qu'il faut pour télécharger sur le Web quand les gens voient votre page. Si vous téléchargez une image à utiliser comme fond de page ou créez à l'aide d'un programme de conception graphique présente est également une étape souhaitable. Vous pouvez réduire la taille de fichier d'une image en choisissant les réglages pour la qualité d'image lorsque vous enregistrez dans un programme tel que Photoshop, Paint.NET ou The GIMP (programme GNU Image Manipulation).

  3. Créer votre code CSS en ouvrant un nouveau fichier dans un éditeur de texte, l'enregistrer avec le nom "backstyle.css" ou tout autre nom que vous préférez, se souvenant de l'attribut "href" dans votre élément HTML "lien" doit correspondre à ce nom. Entrez le réglage de votre image choisie comme fond le code suivant:

    body {background: # 000000 URL ("images / bgpic.jpg") -}



    Ce code suppose que votre fichier image va être enregistré dans un répertoire nommé "images" qui sont stockées dans le même répertoire que la page Web elle-même. Modifier le code pour l'adapter le nom et l'emplacement de votre fichier image si nécessaire. Le code indique également que toute zone non couverte par l'image de fond doit être de couleur noire.

  4. Modifier votre code CSS de dicter si votre image de fond est répétée ou non. Le code suivant indique que l'image sera répété sur l'axe "y" mais pas sur le "X" axe:

    background: # 000000 URL ("images / bgpic.jpg") repeat-y;

    Autres valeurs facultatives pour le fond répétition comprennent "repeat-x" pour répéter sur le "x" axe et "no-repeat" pour afficher l'image une seule fois. Si vous ne spécifiez pas de valeur pour la propriété de répétition de fond, la valeur par défaut est de l'image se répète le long des deux axes.

  5. Modifier votre code CSS pour fixer l'image de fond. Le code étendu suivant présente toutes les propriétés de fond dans une seule déclaration, y compris le réglage fixe:

    background: # 000000 URL ("images / bgpic.jpg") repeat-y fixe;

    En ajoutant le mot «fixe» précise que lorsque la page défile par l'utilisateur de l'image d'arrière-plan ne défilera pas avec elle, mais restera dans la même position. Enregistrez vos fichiers, téléchargez-les sur votre serveur et de les parcourir afin de tester leur apparence.

Conseils Avertissements

  • Une image de fond efficace peut créer un look élégant à une page sans la nécessité de travaux de conception graphique détaillée.
  • Une image répétée de fond peut paraître déroutant en fonction de l'image en question.
» » » » Comment faire un fond fixe en CSS