18008 sujets

Questions générales et questions de débutants

Arrière-plan de cellule ou tableau

Bonjour !
Mon problème est simple. je voudrais créer en arrière-plan de tableau ou cellule une image qui s'adapte et non qui se répète. La tableau (et l'image) ont 100% de largeur et 209 pix de hauteur.
J'aimerais avoir le code en HTML (pas css ou javascript).
Est-ce possible ?
Bonjour altaj,

Pour afficher un arrière-plan dans un élément quelqu'il soit le plus simple est d'utiliser du CSS.
Tu peux tout à fait insérer une balise <style> dans la partie <head> de ta page HTML.

Tu peux donc mettre en arrière-plan une image qui fera 100% de la largeur de ta cellule comme ceci par exemple :

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <style type="text/css">
    table{
      width: 100%;
    }
    .macellule{
      background-image: url('img/monimage.jpg');
      background-repeat: no-repeat;
      background-size: 100% auto;
      width: 100%;
      height: 209px;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td class="macellule"></td>
    </tr>
  </table>
</body>
</html>

La déclaration background-size: 100% auto; permet d'ajuster la taille de l'arrière-plan Smiley langue .
Si tu changes auto par 209px, ton image sera déformée..

J'espère que ce code va te permettre d'avancer un peu, c'est très générique.
Le plus simple serait que tu colles ici ton code déjà écrit.

Bon développement
Matthieu
Bonjour et merci, ça marche bien.
Que tout le tableau intègre la page complètement (sans espaces blancs en haut et sur les côtés.
J'aimerais que la cellule du haut contienne mon image à 100% de large sur 290 pixels de haut, et que les 2 cellules en dessous n'intègrent pas ces données d'arrière plan.
Je joins mon code.
Merci.

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
table{
width: 100%;
}
.macellule { background: url(../Documents/CLIENTS/Antwerp%20Tea/Antwerp/Images/Header.jpg) no-repeat; width: 100%; height: 290px; background-size: 100% 290px }
</style>
</head>
<body>
<table>
<tr>
<td class="macellule"></td>
</tr>
<tr>
<td class="macellule"></td>
</tr>
<tr>
<td class="macellule"></td>
</tr>
</table>
</body>
</html>
Salut altaj,

Si je comprends bien ton besoin, tu devrais utiliser des <div> plutôt que des tableaux.

Ci-dessous le code pour avoir un bandeau à 100% de la largeur et de 290px.
Les éléments suivants seront sans arrière-plan.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test header</title>
  <style type="text/css">
    body{
      margin: 0;
    }
    .header{
      background-image: url("http://lorempixel.com/output/nature-q-c-1920-500-3.jpg");
      background-size: 100% auto;
      background-repeat: no-repeat;
      height: 290px;
    }
    .contenu{
      text-align: center;
      font-size: 30px;
      background-color: gainsboro;
      border-bottom: 1px black solid;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <div class="header"></div>
  <div class="contenu">Contenu 1</div>
  <div class="contenu">Contenu 2</div>
</body>
</html>

La démo en ligne :
http://matthieurebillard.fr/test/header.html

Voilà, en espérant que ça réponde un peu à ton souhait.

Bonne soirée
Matthieu
Modifié par MatthieuR (26 Oct 2014 - 22:57)
Sujet clos
Aller à