h1 {background-color: green}
h1 {background-color: rgb(147, 231, 63)}
h1 {background-color: #E3A7EE}

Cet exemple montre le titre "Internet" avec dans le premier cas un fond d'une couleur verte, la seconde est désignée par la formule RGB tandis que la dernière l'est par la méthode HTML.

INTERNET

INTERNET

INTERNET

p 
{background-image: 
  url(../courshtml/images/Fondtableau.gif)}

Cet exemple montre un paragraphe avec une image en arrière plan.

Internet découle directement de recherches démarrées au milieu des années 1970, sous l’impulsion de la D.A.R.P.A. (Defense Advanced Research Projects Agency), l’agence du ministère de la Défense américain gérant les projets de recherche avancée. Au début des années 1980 Arpanet, le réseau de télécommunications issu de ces travaux, se scinde en deux parties: l’une, réservée à la recherche, conserve le nom d’Arpanet; l’autre partie, réservée aux activités militaires, prend le nom de MILNET. En 1985, la N.S.F. (National Science Foundation) subventionne NFSNET, un réseau grande distance relié à Arpanet qui interconnectait les plus gros centres de calcul. NFSNET devient rapidement le réseau fédérateur des réseaux des universités et des centres de recherche américains. Depuis lors, il s’est étendu à tous les continents et connaît un essor considérable sous le nom d’Internet, du nom de l’un des protocoles de communication nécessaires à l’interconnexion des machines.

em 
{background-image: 
  url(../courshtml/images/DegradeBleu.gif)}

Cet exemple montre des parties d'un texte mises en évidence par l'intermédiaire d'un fond illustré par une image.

Un nouveau format d'image vectorielle pourrait devenir dans les années à venir une référence dans le domaine de l'Internet. Il s'agit du format SVG (Scalable Vector Graphic).
img 
{background-image: 
  url(../courshtml/images/DegradeVert.gif)}

Cet exemple devrait montrer une image, mais celle-ci n'étant pas accessible, un fond sous forme d'image apparaît à la place.

Normalement une image aurait dû apparaître à cet endroit et vous ne voyez qu'un fond
ul 
{background: 
  url(../courshtml/images/DegradeRouge.gif)
  no-repeat 
  center center}

Cet exemple montre une liste possédant une image en arrière plan qui est positionné au centre. De plus l'image n'est pas répétée.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
i 
{background-color: #E3A7EE}

li 
{background: 
  maroon 
  url(../courshtml/images/Fond.jpg) 
  no-repeat 
  20px center}

Cet exemple montre une liste dont les deux derniers items ont une image et une couleur de fond , de plus l'image ne se répète pas et est alignée à 20 pixels du bord gauche et au centre verticalement. Par ailleurs, la balise italique a également une couleur marron en arrière plan.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
table 
{background-image: 
  url(../courshtml/images/Bison.jpg)}

Cet exemple montre un tableau ayant une image de fond.

Contenu Contenu
Contenu Contenu
Contenu Contenu
th 
{background: 
  navy
  url(../courshtml/images/Ordinateur.gif) 
  no-repeat 
  center top}
  
td.fond1 
{background-color: green}

td.fond2 
{background-image: 
  url(../courshtml/images/DegradeBleu.gif)}
  
td.fond3 
{background-image: 
  url(../courshtml/images/Bison.jpg)}

Cet exemple montre un tableau dont les celulles de données ont des fonds différents et la cellule d'en-tête possède une image et une couleur de fond. L'image ne se répète pas et son alignement et au centre et en haut.

Titre
Contenu Contenu Contenu