こんにちは。
自分のホームページの背景に写真を選んだため、日記などでスクロールしていると目が回ってしまうんです。背景を固定し、文字だけをスクロールさせる事はできないのでしょうか?
御回答をよろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

同じような答えですが、私はスタイルシートを使います。


</HEAD>の前に
<STYLE TYPE="text/css"><!--
BODY{ background-image:url("画像の名前");
background-repeat : no-repeat ;
background-attachment : fixed;
background-position: bottom right;}
-->
</STYLE>
画像の名前というのはback.jpgとかです。
上記の場合は画面に対して右の下に指定しています。
下から3行目のbottom rightのところです。
上が良ければbottomでなくてtopとか。この行消すと
左上に自動的に配置されます。
素材屋さんなどに説明ありました。
http://www.blue-moon.jp/graphics/bg_style01/inde …

参考URL:http://www.blue-moon.jp/
    • good
    • 0
この回答へのお礼

スタイルシートかぁー。
よーし、やってみます!
ありがとうございました。

お礼日時:2002/04/16 02:12

私も普段はスタイルシートを使うのですが、ネスケだとスタイルシートが無効になることが多いので、無難に背景画像の固定をするならばBODYタグでの指定がいいと思います。



&lt;BODY background="***.gif" bgproperties="fixed">
    • good
    • 0
この回答へのお礼

なるほどなるほど。
ネスケだとみれないときがあるのかぁ。
ありがとうございました。

お礼日時:2002/04/16 02:13

たとえば、次の例のようなソースにして、


『bgproperties="fixed"』
を使う方法があると思います。

--
<BODY background="○○○" bgcolor="○○○" bgproperties="fixed">
・・・・・
</BODY>
    • good
    • 0
この回答へのお礼

ありがとうございました。
なんとかやってみようとおもいます!

お礼日時:2002/04/16 02:11

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

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

Q背景固定、文字がスクロールするHPのタグは?

よく背景(壁紙)が固定で、文字や、画像だけスクロールバーでスクロールできるHPを見かけますが、HTMLタグをご存知でしたら、できれば初心者向けで回答お願いします。

Aベストアンサー

<BODY BGPROPERTIES=FIXED>でできると思います。

このような場合、メニューで表示-ソースからソースコードを見てみると良いですよ。

Q背景がスクロールせずコンテンツのみスクロールするページについて

Dreamweaver4を使ってHPを創っています。半年くらいで3.4つのHPを創った程度のものです。
最近、背景はスクロールせず、コンテンツだけがスクロールするページを見るのですが、そのようなページを創りたいと思っていますが、Dreamweaver4でできるのかどうか、どうすれば出来るのか、またほとんどのブラウザーで確認できるのか、などどんなことでも教えてください。よろしくお願いします。

Aベストアンサー

CSSで指定できます。
私が使っているDREAMWEAVERは3なのですが、たぶん4でも同じだと思うので、手順を書きますね。

1.画面上で右クリック、[CSSスタイル][スタイルシートの編集]を表示
2.[新規作成]押下
3.[HTMLタグの再定義]を選択し、下のプルダウンから[body]を選択
4.[カテゴリ][背景]を選択
5.[背景イメージ]にセットしたい画像を指定し、
 [リピート]=「リピートなし」
 [添付]=「固定」
 を指定
以上で実現できるはずです。

CSSに対応しているブラウザは、再現できたはずです。
詳細バージョンは忘れてしまいました。(^^;;
たぶん、ネスケ、IEともに4以上ならOKのはずです。

Q背景を固定した時の表の背景

こんにちは。HPを制作し始めたばかりの初心者です。

質問です。
背景をこんな感じて固定した時
<STYLE type="text/css">
<!--
BODY{
background-image : url(○○.jpg);
background-repeat : no-repeat;
background-attachment : fixed;
background-position : 90% 50%;
}
-->
作ってる表の背景画像が無効になっちゃいます。
なんか間違ってるんでしょうか???
お答えを頂けると有り難いのですが。

Aベストアンサー

理屈からいくとBODYの背景が1番後ろで、TABLEの背景が2番目に後ろで、最前面がテキストとなるわけなので、ページ全体の背景画像とテーブル内の背景画像は表示されるハズなのですよね。

で、試しに
<style type="text/css"><!--
body {
background : #fffff0 url("○○.gif") 0% 0% no-repeat fixed ;}

th {
background : #3b3b3b url("○○.jpg") repeat ;}
td {
background : #6699cc url("○○.gif") 50% 50% repeat-x scroll}
--></style>
<body>
<table align="left" height="10%" width="100%" border="2" cellspacing="0" cellpadding="2">
<th rowspan="11">test</th>
<td>td-test</td></table></body>

というのを作ってみました。これを改造して作ってみてください。
もしかして、CSSでTD要素に背景画像を固定させて、今度はTD要素の属性で背景画像を並べる、ということでしたらレンダリングされないです。そもそもその使い方はかなりおかしいですし。

あと、Netscape社のブラウザではBODY要素以外の背景画像以外はレンダリングがおかしくなることが多いです。

理屈からいくとBODYの背景が1番後ろで、TABLEの背景が2番目に後ろで、最前面がテキストとなるわけなので、ページ全体の背景画像とテーブル内の背景画像は表示されるハズなのですよね。

で、試しに
<style type="text/css"><!--
body {
background : #fffff0 url("○○.gif") 0% 0% no-repeat fixed ;}

th {
background : #3b3b3b url("○○.jpg") repeat ;}
td {
background : #6699cc url("○○.gif") 50% 50% repeat-x scroll}
--></style>
<body>
<table align="left" height="10%" width="100%" bor...続きを読む

Q★★★フッター最下部固定/スクロール時も常に最下部に固定させる方法

【OS】Windws XP HomeEdition
【ブラウザ】InternetExplorer7
【参照URL】http://nowtester.web.fc2.com/tester.html

ご覧頂きまして誠に有難う御座います。
皆様のお知恵を貸して頂ければ幸いです。

現在、下記URLの様なHTMLでHPを制作しております。
http://nowtester.web.fc2.com/tester.html
当方の意向として、フッターに該当するコピーライト表記を、
どのサイズのモニターから閲覧しても、
画面最下部に固定表示したいと考えております。
(スクロールが発生した際に見える位置の最下部に常に固定させたい)

現在のページも、一見、開いた際には最下部に固定表示されますが、
画面のリサイズを実施した場合、最下部に固定されていたフッターは、
最初に開いた画面の最下部として表示された位置で固定されており、
スクロール時ズルズルと画面と一緒にズリ上がってしまいます。

別サイト様の過去投稿に参考になりそうなモノが有りましたが、
現在私が書いているHTMLへの実装が上手く行きませんでした。
http://gac.kir.jp/21/13599(りゅう様の最後の投稿)

意図としては↑の様なモノを現在のHTMLに実装出来ればベストですが、
私の挿入位置が悪いのか上手く行きません。
具体的にどの様に書き足せば意図するモノが完成するか、
ソースの組み方を教えて頂けますと幸いです。

因みに、↑投稿のりゅう様が書かれているHTMLだけだと成功しますが、
あくまでも私が現在書いているHTMLに書き足す場合の方法を教えて下さい。
以上、何卒よろしくお願い致します。

【OS】Windws XP HomeEdition
【ブラウザ】InternetExplorer7
【参照URL】http://nowtester.web.fc2.com/tester.html

ご覧頂きまして誠に有難う御座います。
皆様のお知恵を貸して頂ければ幸いです。

現在、下記URLの様なHTMLでHPを制作しております。
http://nowtester.web.fc2.com/tester.html
当方の意向として、フッターに該当するコピーライト表記を、
どのサイズのモニターから閲覧しても、
画面最下部に固定表示したいと考えております。
(スクロールが発生した際に見える位置の最下部に常に...続きを読む

Aベストアンサー

「要素の下に表示」ということでは違うみたいですね。

「常に画面の下」に表示させるのは「position:fixed;」を使用します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>テスト中</title>
<style type="text/css">
<!--

*{
margin:0;
padding:0;
}

html,body{
height:100%;
background-color: #000000;
color: #FFFFFF;
}
html{
overflow-y:scroll;
}
div#maincontents{
background-image: url(image/back.jpg);
}
.img1{
text-align:cenetr;
}
.img2{
position:absolute; top:-84px;
text-align:cenetr;
}
.img2 img{
border:none;
}
div#footer{
position:fixed;
bottom:0;
left:0;
text-align:center;
width:100%;
filter:dropshadow(color=#999999,offX=1,offY=1);
}

/* * * IE6 * * * */
* html,
* html body{
overflow-y:hidden;
}
* html div#maincontents{
height:100%;
overflow-y:scroll;
}
* html div#footer{
position:absolute;
bottom: expression(this.parentNode.clientHeight % 2 == 0 ? 0 : -1);
}

-->
</style>

</head>

<body>

<div id="maincontents">
<div class="img1"><img src="back.jpg" /></div>

<div class="img2">
<img src="back-trans.png" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="16,25,245,208" href="★★★" target="_blank" />
</map>
</div>
</div>
<div id="footer">
コピーライト表記@フッター固定
</div>

</body>
</html>

これでどうでしょうか?

「要素の下に表示」ということでは違うみたいですね。

「常に画面の下」に表示させるのは「position:fixed;」を使用します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>テスト中</title>
<style type="text/css">
<!--

*{
margin:0;
padding:0;
}

html,...続きを読む

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&Aランキング

おすすめ情報