タイトルで書いたとおりなんですが、
背景画像(gif)を右端に1つで固定画像として置きたいんです。
できれば右下の部分に…
分かる方どうぞ教えて下さい!!

A 回答 (2件)

仮に背景画像が、back.gifだとします……



<STYLE TYPE="text/css">
BODY {
background-image: url(back.gif);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
}
</STYLE>

以上のタグをヘッダーに埋め込んでみてください。
これで出来ると思います。
詳しく知りたい場合は、以下のサイトがオススメです。

参考URL:http://tohoho.wakusei.ne.jp/wwwcss2.htm#Background
    • good
    • 0
この回答へのお礼

なるほど。。早速urlに行って来ます!!ありがとうございます!!

お礼日時:2001/09/11 01:49

CSS(カスケーディングスタイルシート)を使用すれば出来ます。

以下ソースです。そのままHTMLファイルにして見てください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
<STYLE type="text/css">
<!--
BODY{
background-image : url(http://www.okweb.ne.jp/images/okweb_logo32c_130w …);
background-repeat : no-repeat;
background-position : bottom right;
}
-->
</STYLE>
</HEAD>
<BODY>ね?背景は右下でしょ?</BODY>
</HTML>
    • good
    • 0
この回答へのお礼

ありがとうございました。とても助かりました。。

お礼日時:2001/09/11 01:48

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q背景画像の上に透過GIF背景をのせる方法

はじめまして。

メモ帳にHTMLタグ打ち込みでWEBページを作ってるのですが、
bodyで背景画像を指定し、その上に透過GIFをおき、さらにその上にテキストを表示させるにはどうしたらよいのでしょうか。
具体的には、「テキストを表示させるブロック(tableやdiv)の部分」を半透明の透過GIFをフィルターみたいにかぶせて、その上に書くテキストを見やすくさせたい、という動機です。
divのなかのstyle、またはtableでbackgroundを定義しても、もとのbodyの背景が反映されなくなってしまうのですよね。
一応、自分で考えた策としては
・ブロックの背景そのものを、ある程度薄い色に変えた画像を用意してそれをtableの背景にする
というものがあるのですが、これはやはりつなぎ目の部分でズレてしまって見栄えがあまりよくないのです。

かなり細かいところにこだわりすぎな感じもするんですが、
ぜひとも叶えたいのでどなたか方法をご存知でしたら教えていただきたいと思います。
よろしくお願いします。

Aベストアンサー

ブラウザの環境にある程度左右されない方法として、
私の場合、逆に非常にベタなやり方で同じ効果を狙ってページを作っています。
透明部分と白(画によっては背景画像のカラーと同系の薄い色が良いかと)の
市松模様GIFを作って、それをtable背景にしています。

Q背景画像を右下に表示させたかったので、

背景画像を右下に表示させたかったので、
CSSファイルにbackground-position:right bottom;と記述したのですが、
ブラウザで確認すると右には正しく配置されたものの、垂直位置が正しく表示されていませんでした。
垂直位置に関しては下どころか真ん中よりチョイ上に表示されてしまいました。

※他のPCで同じように設定してみたら普通に右下に表示されました。
※ブラウザはIE、Sleipnir共に試しました。

きっとインターネットオプションか何かの設定なのだと思うんですが、
もちろん設定オプション設定をリセットしたり、一時ファイルの容量を10Mぐらいにおとして中身を削除して
再起動等もおこなったんですが、状況かわらずです・・・

他にも画像位置だけでなく、CSSのレイアウトが完璧に反映できない時もあります。
たとえば枠線で画像とテキストを囲ったはずなのに、ブラウザで確認するときちんと囲まれていなかったりします。

もちろんこれも他のPCで確認したら普通に正しく画像とテキストを枠線で囲むことができました。

一体なにが問題なのでしょうか・・・


よろしくお願いします。

背景画像を右下に表示させたかったので、
CSSファイルにbackground-position:right bottom;と記述したのですが、
ブラウザで確認すると右には正しく配置されたものの、垂直位置が正しく表示されていませんでした。
垂直位置に関しては下どころか真ん中よりチョイ上に表示されてしまいました。

※他のPCで同じように設定してみたら普通に右下に表示されました。
※ブラウザはIE、Sleipnir共に試しました。

きっとインターネットオプションか何かの設定なのだと思うんですが、
もちろん設定オプション設定をリセット...続きを読む

Aベストアンサー

例えばbackground-colorを指定するとちゃんとブラウザの下まで色が反映されますか?
そうでない場合、background-positionをdivや標準準拠時のbodyに指定されているのではないかと思うのですが。

Q画像を左下と右下に固定したいのですが…

HTMLの小技がのっているページ等を見ても自分が調べた限り載っていなかったので質問させていただきます。

背景画像を右下などに固定することはわかったのですがそれでは2つ以上の画像を固定できません…。
自分は右下と左下に固定した画像を表示させたいのですがどうやるかよくわかりません。
どうかご教授よろしくお願い致します。

Aベストアンサー

<html>
<head>
<title>サンプル</title>
<style type="text/css"><!--
#left{
background-image:url("./???.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left bottom;
height:100%;width:100%;
position:absolute;
left:0;top:0;
}
#right{
background-image:url("./???.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
height:100%;width:100%;
position:absolute;
right:0;top:0;
}
--></style>
<body>
<div id="left"></div><div id="right"></div>
</body>
</html>

こんな感じでやったら出来ました。

<html>
<head>
<title>サンプル</title>
<style type="text/css"><!--
#left{
background-image:url("./???.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left bottom;
height:100%;width:100%;
position:absolute;
left:0;top:0;
}
#right{
background-image:url("./???.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
height:100%;width:100%;
position:absolute;
right:0;top:0;
}
--...続きを読む

Q背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示する方法

背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。
そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。


【やりたい事】
1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。
2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。
3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツやフッターという文言の表示方法と同じように、左側を基準に表示したい。
4. ブラウザの横幅が1000以下の際、背景画像の上に表示されている画像は画面中央に表示したい。


【現状】
1,2,4は出来ています。
ただ、3については、ヘッダーやコンテンツやフッターという文言の表示方法と同一にする方法が分からず、画面中央に表示されてしまいます。


【ソースコード】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>title</title>
<style type="text/css">
<!--
body {
text-align: center;
margin:0;
padding:0;
}
#wrapper_index_up,
#wrapper_index_bottom {
margin: 0 auto;
text-align: left;
}
#wrapper_index_up,
#wrapper_index_bottom,
#header,
#contents,
#footer {
width: 1000px;
}
#header {
background-color:red;
}
#top_img_wrapper {
background-image:url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif);
background-repeat:no-repeat;
background-position: center;
}
-->
</style>
</head>
<body>
<div id="wrapper_index_up">
<div id="header">ヘッダー</div>
</div>
<div id="top_img_wrapper">
<img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="" width="139" height="92" />
</div>
<div id="wrapper_index_bottom">
<div id="contents">コンテンツ</div>
<div id="footer">フッター</div>
</div>
</body>
</html>

どうかよろしくお願いします。

背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。
そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。


【やりたい事】
1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。
2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。
3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツ...続きを読む

Aベストアンサー

ANo.2です。

> ここは「ブロック内でセンタリング」ではなく、「ブラウザの横ウィンドウ幅でセンタリング」となります。
> 下記のサイトに記載されているように、ブラウザの横ウィンドウ幅を縮めたり広げたりしても、画像が常に中央に固定されているようにしたいです(ブラウザの縦ウィンドウ幅は本件には関係ありません)。
> http://www.lucky-bag.com/appendix/centering-elements/centering.html

その他の補足と、上記サイトを見て、イメージが掴めました。
上記サイトの画像は、"position: absolute;"でtopとleftの位置を50%とする事でウィンドウ(画面)に対して常に上下左右の中央に配置される様にしてあります。これと同様の事をやりたいだけなら簡単ですが、お望みの表示結果に関していくつか確認させて頂きたい事があります。
まずは下記のサンプルを試してみて下さい。
----------------------------------------------------------------------
【修正版サンプル(2)】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>title</title>
<style type="text/css">
<!--
body {
text-align: center;
margin:0;
padding:0;
}

#top_img_wrapper,
#wrapper_index_up,
#wrapper_index_bottom {
width: 1000px;
margin: 0 auto;
text-align: left;
}

#header {
background-color: red;
}

#top_img_wrapper {
background: url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif) center center no-repeat;
}

#top_img {
position:absolute;
width: 139px;
height: 92px;
top: 0;
left: 50%;
margin-left: -70px;
}
-->
</style>
</head>
<body>

<div id="wrapper_index_up">
(wrapper_index_upの領域 ここから)
<div id="header">ヘッダー</div>
(wrapper_index_upの領域 ここまで)
</div>

<div id="top_img_wrapper">
(top_img_wrapperの領域 ここから)
<div id="top_img"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="中央固定表示させる画像X" width="139" height="92" /></div>
<p class="hoge">top_img_wrapper内で画像Xの下に表示する最初の子要素(テキストなど)</p>
(top_img_wrapperの領域 ここまで)
</div>

<div id="wrapper_index_bottom">
(wrapper_index_bottomの領域 ここから)
<div id="contents">コンテンツ</div>
<div id="footer">フッター</div>
(wrapper_index_bottomの領域 ここまで)
</div>

</body>
</html>
----------------------------------------------------------------------
前回のサンプルからの修正点は以下のみです。

【1】背景画像を指定する#top_img_wrapperとは別個に、中央固定表示画像を挿入する為だけのブロック#top_imgを追加。
【2】#top_img内で、画像Xをbodyに対しての絶対配置として指定。(ここの手法については参考サイトにポイントの解説が載っているので各プロパティの設定の理屈は省略します)

これで#top_img_wrapperの位置や幅とは関係なく、#top_imgは常に画面の左上を基点とした絶対配置になる為、水平方向はウィンドウ幅に対して常にセンタリングされる事になります。ただし、質問者様の場合は参考サイトと違って、画像Xの上下にヘッダー・コンテンツ・フッターというブロックが存在していますから、それらと、画像Xが(参考サイトの様に制限なく)重なってしまっては困るのでは?現に、上記サンプルでは、垂直方向に対する絶対位置を0にしてしまっているので、画面の上端にくっついてしまい、ヘッダーの上に画像Xが重なってしまう状態になっています。

これらを回避する為には、更にいくつかの条件を明確にして頂く必要があります。

(1)#top_imgの描画開始位置は、上からどれだけの位置にあればよいのか?例えば、ヘッダーを収める#wrapper_index_upの高さが50pxと決まっており、画像Xはそのすぐ下に、という事であれば、topプロパティの位置を指定する。
#wrapper_index_up {
height: 50px;
}
#top_img {
top: 50px;←修正
}
(2)#top_img_wrapperに表示させたい要素は、実は背景画像しかないのか?そうであれば、背景画像の全体像が必ず描画される様に、#top_img_wrapperに背景画像と同じ高さを指定しておく必要がある。例えば質問文中のソースの実寸通りであれば、下記の様に。
#top_img_wrapper {
height: 92px;←追加
}
(3)(2)と違い、#top_img_wrapperにはテキストなどの子要素があり、画像Xの下から表示させたい、というのであれば、#top_img_wrapperの高さの確保を最低92px以上に変更した上で、#top_img_wrapperの中で画像Xの下に配置する要素にはmargin-topなどで画像X分の余白を上方向に取ってから描画を開始する様にする。
#top_img_wrapper {
min-height: 92px;←追加
_height: 92px;←min-heightが無効なIE6用ハック
}
#top_img_wrapper p.hoge {
margin: 92px 0 0 0;
}

…という感じですが。いかがでしょうか。

ANo.2です。

> ここは「ブロック内でセンタリング」ではなく、「ブラウザの横ウィンドウ幅でセンタリング」となります。
> 下記のサイトに記載されているように、ブラウザの横ウィンドウ幅を縮めたり広げたりしても、画像が常に中央に固定されているようにしたいです(ブラウザの縦ウィンドウ幅は本件には関係ありません)。
> http://www.lucky-bag.com/appendix/centering-elements/centering.html

その他の補足と、上記サイトを見て、イメージが掴めました。
上記サイトの画像は、"position: absolute;"...続きを読む

Q背景と別の画像を右下に固定して表示するには?

(1)背景を表示して、さらに(2)右下の位置に固定して別の画像を表示することは出来るのでしょうか?

(1)だけなら、BODYタグの中で設定すれば出来ました。
(2)だけなら、某サイトでコピペしたものを使わせてもらい、表示することが出来ました。
しかし、二つを同時にしようとすると、2番目のものしか表示されません。
どうすべきなのか、無理なのか、ご存知の方、教えてください。

ちなみに、(2)のコピペとは以下のものです。スタイルシートというのでしょうか?良くわかりませんが。
<STYLE TYPE="text/css">
<!--
BODY{
background-image:url(gazou.png);
background-attachment :fixed;
background-repeat: no-repeat;
background-position: 100% 100%;
}
-->
</STYLE>

Aベストアンサー

ページ中をテーブルで囲って表示してはいかがでしょうか。

bodyに背景を一つ。
固定する背景は、tableのtdに対して行う。
つまり、
<html>
<head>
<STYLE TYPE="text/css">
<!--
body {
background:url(hoge.gif);
}
.MainTable td{
background-image:url(gazou.png);
background-attachment :fixed;
background-repeat: no-repeat;
background-position: 100% 100%;
}
-->
</STYLE>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="MainTable">
<tr><td>
~~~~
</td></tr>
</table>
</body>
</html>


人気Q&Aランキング

おすすめ情報