影付き(透過)ロゴタイトルの表示ないし背景との同調について

解決済

質問者：RiodeJanei
質問日時：2010/03/05 00:48
回答数：1件

影付き(透過)ロゴタイトルの表示ないし背景との同調について

只今HPを作成しているのですが、今回背景にボーダーを使い、その上にタイトルロゴを表示させようと思っています。デザイン的にそのロゴに影を付け、初めは.gifで透過保存させようと思ったのですが、荒々しい風に出来てしまいました。pngでは美しく出来たのですが、pngはネットブラウザ環境によっては表示されないと聞いたのであまり使いたくなくて・・・。
そこで今度はそのロゴにあらかじめボーダー画像を加えて、cssで上手に背景と溶け込ませて表示させようと思ったのですが、上手に表示出来ません。

ちなみにそのタイトルを表示させる部分は
#wrapper{
margin:0px;
padding: 0px;
text-align: center;
}

#contents{
width: 880px;
margin-left:auto;
margin-right:auto;
}

で内包してあります。html上で簡単に書くと
・
・
・
<body>
<div id="wrapper">
<div id="contents">
ここに画像タグ
</div>
</div>
</body>
といった感じです。

背景は横一列で固定するようにしています。

body{
font-size: 13px;
line-height:160%;
background-image: url(img/back.gif);
background-repeat:repeat-x;
background-position: 0% 0%;
}

こんな感じです。

CSSでこの問題を解決するか、それともgifで上手に透過画像を作るのか、はたまたpng保存で良いのか、分かりやすく解説して下さる方、宜しくお願いします。分かりにくーーい質問で申し訳ありません・・・。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： naokita
回答日時：2010/03/06 02:59

普通は透過GIFで上手く加工します。

PNGで可能ならGIFでサイズは大きくなりますが再現可能です。

背景一体レイアーの場合、
contentsがセンター配置ですからブラウザの可変でずれるのは当然です。
contentsを左配置にして画像を左からmargin-leftで配置するか、
今のまま画像をwrapperに対してのposition配置にするか。
画像を固定して、中の文章をセンター配置にする方法や、
wrapperに対してロゴを背景固定にする方法もありますね。