web-dev-qa-db-fra.com

HTML/CSS - Création d'une bannière/en-tête

J'ai une image horizontale sous forme de GIF et JPG. C’est quelque chose que j’ai fait avec Paint - un logo de texte avec une image sur un fond solide.

J'ai beaucoup de difficulté à essayer de l'afficher sous forme de bannière/en-tête.

Jusqu'à présent, je ne peux obtenir que le fond solide pour apparaître. Le texte/logo disparaît mystérieusement. L’arrière-plan uni s’étend en plein écran sur mon image d’arrière-plan, ce que je veux, mais évidemment, avec mon texte/mon logo.

C'est le code que j'utilise:

<style>
body {
  background: url("mybackgroundimage.gif") repeat;
}
#banner {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 200px;
  z-index: -1;
}
</style>
</head>
<body>
  <img id="banner" src="mybannerimage.gif" alt="Banner Image"/>
</body>

Je pense qu'il y a peut-être un problème avec mon image. J'ai essayé cela en utilisant une image différente, et cela a fonctionné, mais mon texte a été étiré.

Comment créer une bannière avec un logo qui ne s'étire pas lorsque j'utilise ce code?

htmlcssheaderbanner
3
user2714330

Vous avez un type-o:

sa: height: 200x;

et il devrait être: height: 200px; vérifiez également l’url de l’image; il devrait être dans le même répertoire, semble-t-il.

En outre, n'utilisez pas "px" à des valeurs nulles ("0"). 0px, 0em, 0% est toujours 0. :)

top: 0px;

est la même chose avec:

top: 0;

Bonne chance!

4
RGLSV

Supprimez la valeur z-index.

Je recommanderais également cette approche.

HTML:

<header class="main-header" role="banner">
  <img src="mybannerimage.gif" alt="Banner Image"/>
</header>

CSS:

.main-header {
  text-align: center;
}

Cela permettra de centrer votre image sans l'étirer. Vous pouvez ajuster le remplissage si nécessaire pour lui donner un peu d’espace autour de votre image. Comme cela se trouve en haut de votre page, vous n'avez pas besoin de le forcer avec une position absolue à moins que vous ne souhaitiez que vos autres éléments passent en dessous. Dans ce cas, vous voudrez probablement une position: fixe; en tous cas.

2
Jeffpowrs

Supprimez la position: absolute; attribut dans le style

1
Karel B.

Pour l'image qui ne s'affiche pas. Ouvrez l’image dans l’éditeur d’images et cochez la case type que vous appelez probablement «gif», mais elle est enregistrée dans un format différent, ce qui est une des raisons pour laquelle le navigateur ne parvient pas à l’afficher et ne l’affiche pas.
Pour le problème d’étirement d’image, spécifiez les dimensions réelles en largeur et en hauteur dans #banner au lieu du width: 100%; height: 200px que vous avez spécifié.

0
Sanjay Ursal.

La hauteur manque un p de sa valeur.

Devrait être hauteur: 200 * p * x

0
Stuart Miller