私は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>
私のイメージに何か問題があるかもしれません。別の画像を使用してこれを試してみましたが、うまくいきましたが、テキストが引き伸ばされました。
このコードを使用するときに伸びないロゴ付きのバナーを作成するにはどうすればよいですか?
タイプoがあります。
その:height: 200x;
次のようになります:height: 200px;
画像のURLも確認します。それが思われる同じディレクトリにある必要があります。
また、null(別名「0」)値で「px」を使用しないでください。 0px、0em、0%はまだ0です。:)
top: 0px;
と同じです:
top: 0;
幸運を!
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が必要でしょう。とにかく。
スタイルのposition:absolute;属性を削除します
表示されていない画像の場合。画像エディターで画像を開き、type
を確認します。おそらく「gif」と名前が付けられていますが、異なる形式で保存されているため、ブラウザーがレンダリングできず、表示されません。
画像の伸縮の問題については、指定した#banner
ではなくwidth: 100%; height: 200px
で実際の幅と高さの寸法を指定してください。
高さの値にpがありません。
高さ:200 * p * x