Bandeau tronqué en hauteur sur grand écran

**LordClaymore** · 20/09/2014, 18h19

Vous pouvez m'expliquer ça.

J'ai un tableau avec une image de type bandeau faisant office de background. Celle-ci fait 138 pixels de haut. Afin d'assurer qu'il s'affiche au complet, dans mon <td> j'ai inséré un spacer transparent de 138 pixels de haut. L'affichage est parfait partout sauf sur les grands écrans où mon bandeau est coupé à la moitié dans le sens de la hauteur. Comment régler ça ?

D'ailleurs, sous-question, j'ai remarqué que parfois sous Explorer mon nouveau site s'ouvre en affichage 75% ce qui altère aussi mon image de bandeau. Pourquoi Explorer fait ça ? Est-ce qu'on peut l'obliger à s'ouvrir en 100% ?

CODE :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.bandeau {
	background-image:url(images/bandePale.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<table border="0" width="100%" cellpadding="0" cellspacing="0"  class="bandeau" height="138">
              <tr>
                <td rowspan="2"><img src="images/spacerBandeau.gif" width="2" height="138" ></td>

**NoSmoking** · 21/09/2014, 10h36

Bonjour,

J'ai un tableau avec une image de type bandeau faisant office de background.(...)j'ai inséré un spacer transparent de 138 pixels de haut

Il te faut simplement changer d'approche et abandonner ta structure sur base de TABLE.

**LordClaymore** · 21/09/2014, 17h07

Alors vous suggérez quoi, je ne veux pas mettre simplement l'image parce que je veux que mon bandeau s'adapte à toutes les résolutions.

**TiranusKBX** · 21/09/2014, 18h17

si nous connaissions le code/structure de ta page nous serions plus à même de t'aider
de plus tous ce qui est élément de décoration de nos jours est en background de div

**LordClaymore** · 22/09/2014, 01h44

Voici le code, je vous prie d'être indulgents, ça ressemble à un spaghetti de tout ce que j'ai pu trouver comme pistes de solutions. Ce n'est pas du beau code...

Structure de l'index :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<?php include("entete.html"); ?>
<?php include("menu.html"); ?>
<?php include("corpsIndex.html"); ?>
<?php include("infos.html"); ?>
<?php include("credits.html"); ?>

Structure "entete.html" :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<head>
<link rel="stylesheet" href="styles.css" type="text/css" /> 
</head>
<body>
<div class="bandeau">
<img src="images/spacerBandeau.gif" height="138" width="2">
</div>
</body>

Feuille de style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#bandeau {
	width:100%; 
    height:100%;
}	
.bandeau {
	background-image:url(images/bandePale.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}

L'image originale du bandeau fait 1292 x 138 pixels, comme je disais il n'y a que sur les très grands écrans (ou quand le zoom tombe sous la barre des 70% que le bug survient)

Nom : Capture004.jpg
Affichages : 180
Taille : 111,2 Ko

Nom : Capture004.jpg
Affichages : 180
Taille : 111,2 Ko

Invité · 26/09/2014, 15h00

Bonjour,
dans ton cas, ce n'est pas forcément la bonne idée de mettre l'image en background,
SAUF si tu limites la largeur du div conteneur à celle de l'image ( max-width:1292px; )

En effet, le div est limité en hauteur à 138px.
Dès que la largeur de la fenêtre dépasse celle de l'image ( 1292px ), celle-ci continue à s'adapter ( background-size:cover; )....
...la hauteur aussi, dépasse 138px et le bas de l'image disparait.

La mettre simplement et directement dans une balise <img .../> avec width:100%; résoudra cela.

Une autre solution est d'adapter dynamiquement via JavaScript la hauteur du div en proportion de la hauteur...

**Muchos** · 27/09/2014, 02h15

Euh… entete.html contient les balises HEAD et BODY?! Et il n'y a pas de DOCTYPE?

Pour répondre, il me semble que fixer la hauteur de la bannière suffit. Sinon, un background CSS avec background-size: 100% 100%;, mais l'image pourrait se déformer.

Bandeau tronqué en hauteur sur grand écran

Dimensionnement en CSS

Discussions similaires

Partager

Partager