web-dev-qa-db-ja.com

HTML / CSS--バナー/ヘッダーの作成

私はGIFとJPGとして水平画像を持っています。それは私がペイントで作ったものです-固体の背景に画像のあるテキストロゴです。

私はそれをバナー/ヘッダーとして表示させるのに苦労しています。

これまでのところ、背景をしっかりと表示することしかできません。テキスト/ロゴが不思議なことに消えます。無地の背景は、背景画像の上にフルスクリーンで表示されます。もちろん、テキスト/ロゴが表示された状態で、それが必要です。

これは私が使用しているコードです：

<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>

私のイメージに何か問題があるかもしれません。別の画像を使用してこれを試してみましたが、うまくいきましたが、テキストが引き伸ばされました。

このコードを使用するときに伸びないロゴ付きのバナーを作成するにはどうすればよいですか？

htmlcssheaderbanner
3
user2714330

タイプoがあります。

その：height: 200x;

次のようになります：height: 200px;画像のURLも確認します。それが思われる同じディレクトリにある必要があります。

また、null（別名「0」）値で「px」を使用しないでください。 0px、0em、0％はまだ0です。:)

top: 0px;

と同じです：

top: 0;

幸運を！

4
RGLSV

Z-index値を削除します。

このアプローチもお勧めします。

HTML：

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

CSS：

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

これにより、画像が中央に表示されます。必要に応じてパディングを調整して、画像の周囲にスペースを与えることができます。これはページの上部にあるため、他の要素をその下に配置する場合を除き、絶対位置で強制する必要はありません。その場合、おそらくposition：fixedが必要でしょう。とにかく。

2
Jeffpowrs

スタイルのposition：absolute;属性を削除します

1
Karel B.

表示されていない画像の場合。画像エディターで画像を開き、typeを確認します。おそらく「gif」と名前が付けられていますが、異なる形式で保存されているため、ブラウザーがレンダリングできず、表示されません。
画像の伸縮の問題については、指定した#bannerではなくwidth: 100%; height: 200pxで実際の幅と高さの寸法を指定してください。

0
Sanjay Ursal.

高さの値にpがありません。

高さ：200 * p * x

0
Stuart Miller