- 締切済み
背景だけをフル画面表示したい
j13の回答
- j13
- ベストアンサー率80% (4/5)
＞背景だけをフル画面で表示し、・・・（中略） ここで言う「背景」とは、バックグラウンド イメージ（画像）という意味で解釈して宜しいでしょうか？ <body background="画像のファイル名"> この属性は、HTML4.01では非推奨とされています。CSSで代替えすることをお薦めします。 <head>～</head>内に、以下のCSSを付け足してみてください。 ---------------------------------------------------- <style type="text/css"> <!-- body {background-image:url('画像のファイル名'); background-color:背景色; background-repeat:●●●;} --> </style> ----------------------------------------------------- ・●●●＝背景画像の繰り返しを指定するプロパティ no-repeat 繰り返さず１点のみ表示 repeat 縦横に繰り返す（省略時） repeat-y 縦方向（ｙ軸のみ）に繰り返す repeat-x 横方向（ｘ軸のみ）に繰り返す なお、背景画像の配置位置を指定する場合は・・ background-position:横位置 縦位置; を追加してください。 ＜例＞ background-position:200px 300px; ※CSSは、独立ファイル（.css）として保存して呼び出すことによって、デザインの管理がしやすくなりますのでHTMLファイルの管理がしやすいかと思います。 ご参考までに・・・
関連するQ&A
- 背景画像が表示されません
こんにちは。 お世話になります。 会社命令で、生まれて初めてホームページを作成しているものです。 入門テキスト通りにやっているのですが、どうしても下記にあげます事が上手く画面に反映されません。 1、背景画像を「image/sky82.jpg」で固定する。背景に壁紙の様に大きく単独で、この画像を使用したいのですが、 一切表示がなされない。 2、表示文字を白くしたいが、そもそも文字が表示されない。 また、文字が表示される個所は、画面中央に、縦長で表示したい。 以上です。 以下が、テキストを貼り付けて入力しましたデータ（？）になります。 私がいじったところは、「image/sky82.jpg」を、もと有ったデータと置き換えただけです。 テキストでは、文字が白く、背景に画像が右下に固定されています。 どうしたら、上手く表示されるのでしょうか？ どなたか、お力をかしては頂けないでしょうか？ よろしくお願い致します。
- ベストアンサー
- CSS
- CSSでの背景画像の設定について
CSSでの背景画像の設定について質問です。 参照ページ（http://www.balmuda.com/jp/）のような、メニューバーやフッター部分の背景画像が画面いっぱいに広がるようなページを作成したいと思っているのですが、CSSでの配置で問題があったので質問させて頂きます。 以下のようなdivを作って、wrapper部分に背景画像を設定しました。 <topmenu-wrapper> メニューバー部分の背景画像を指定 <topmenu> margin0 auto;で画面中央に配置 <contents-wrapper> コンテンツ部分の背景画像を指定 <contents> margin0 auto;で画面中央に配置 <footer-wrapper> フッター部分の背景画像を指定 <footer> margin0 auto;で画面中央に配置 floatを使うまでは、思ったような表示が出来ていたのですが、 floatをcontentsの中などで指定し始めると、レイアウトが崩れてしまいました。 clearfixなどで、対処しても、レイアウトが崩れたままです。<margin: 0 auto;がきかず、画面中央に配置されなかったりと。。＞ 解決策を教えて頂ければ幸いです。よろしくお願い致します。
- ベストアンサー
- HTML
- 背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示する方法
背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。 そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。 【やりたい事】 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> どうかよろしくお願いします。
- ベストアンサー
- HTML
- IEとFirefoxでの背景表示の違いについて （CSS）
いつもお世話になっています。 CSSで枠（text_area）を作り、その背景の中央に画像表示させたいと考えています。IEでは中央に表示されるのですが、Firefoxだとtext_areaではなく画面全体の中央に配置してしまい、text_areaには一部欠けた画像が表示されます。 #text_areaに指定した内容を.contentsに書き写しても同じ状態です。 改善策をアドバイスして頂けないでしょうか？ よろしくお願いいたします。 【html】 <body> <div class="contents"> <div id="text_area">あああああ・・・</div> </div> </body> 【css】 .contents{ width:760px; height:540px; margin:0px; margin-right:auto; margin-left:auto; padding:0px; border:0px; } #text_area { overflow:auto; width:600px; height:395px; margin-top:30px; margin-left:auto; margin-right:auto; background-image: url(haikei.gif);/* サイズ：456×392PX */ background-repeat: no-repeat; background-position:center; background-attachment:fixed; }
- ベストアンサー
- CSS
- 背景に1280×1024の画像があるフルスクリーンでスクロールバー非表示をするには
はじめまして。かなり困っております。よろしくお願いします。 現在わたしが作成しようとしているものは下記の項目のものです。 ------------------------------------------------------------------------------------ ・index.htmlにあるenterボタンを押して、flashフルスクリーンのページが表示される（縦横のスクロールなし）。 ・フルスクリーンで使用するflashの背景画像が1280×1024pxである。 ・背景画像は伸縮せず、固定。どのモニターでも中央に表示される。 ------------------------------------------------------------------------------------ です。 フルスクリーンはindex.htmlにjavascriptを埋め込んで、できたのですが、1280×1024pxより小さなモニターの場合、画像が中央に配置しません。 どうすればよいでしょうか？ よろしくお願いします。
- 締切済み
- Flash
- 固定背景画像と画面幅について
初心者のため、分かりづらい質問になると思いますがお許しください。 background-repeat:no-repeat; background-position:right; background-attachment:fixed; 上記のようなCSSで背景画像を固定しています。 画面幅は918pxで設定していますが、これをプレビューで918px以上に伸ばすと、背景画像がどんどん右にズレていってしまいます。 画面環境はそれぞれだと思うので、大きな画面で見た方が背景画像が切れてしまうのを避けたいです。 画面幅918pxで固定をしたいのですが、どのようにすればいいのでしょうか？ 何か補足事項があればすぐに追記します。 よろしくお願いします。
- ベストアンサー
- CSS
- 「デスクトップの背景に設定」で画面全体表示にする方法
windows vistaで、画像を「デスクトップの背景に設定」から画面全体表示にする方法が知りたいです。 ワイド型液晶を使っているためか画面の中央に画像が表示され、左右に黒い部分ができてしまいます。 「デスクトップの背景」の設定から画面全体表示に後で変えることはできますが毎回これをするのが面倒なので。 ご存じの方おられましたら教えていただきたいです。
- 締切済み
- ノートPC
- CSS | 中央寄せと背景
こんにちは、 添付画像を見ていただけるとわかりやすいと思うのですが、 コンテンツの中央寄せにおいて、ウィンドウ幅があるピクセル数を超えた時点で、 背景を出現させることはできるのでしょうか？ また、コンテンツ幅800px、inner-wrapper幅1000px、outer-wrapper幅1200px、 といったページを左上角固定で制作する場合に、 inner-wrapperまでは横スクロールを表示、outer-wrapperには横スクロールを表示させない、言い換えるとウィンドウ幅が999pxまでは横スクロールバーが表示され、1000pxになった時点で横スクロールバーが非表示にすることは可能なのでしょうか。 bodyに overflow: hiddenをかけると横スクロール自体が表示されなくなってしまうので。 ご存じの方、よろしくお願いします。
- ベストアンサー
- HTML
- CSSでの背景色設定とIE6.0での表示について
お世話になります。 全くの初心者ですが、Golive7.0の体験版を使ってHP作りに挑戦しています。 過去ログで調べてもわからなかったので教えて下さい。 使用OS : Windows XP (1) HTMLで表示する文章を作り、CSSファイルで、divブロック（class=contents）内の背景や文字色などは設定できましたが、ページ全体のbodyに適用させる背景色は反映されません。 body { background-color: #E7FAEE; } HTMLソースの方に直接上記の設定を指定すると反映されました。 参考にしている入門書にはCSS内で記述するように書かれていますが、何か忘れていることなどがありますでしょうか？ CSSファイルのリンク設定はちゃんと反映されています。 (2) divブロック（contents）を画面の真ん中に配置するよう、 .contents { text-align: center; width: 600px; margin:auto; } と設定しましたが、IE6.0では画面の左端に寄っています。 ネットスケープ7.1ではきちんと中央に表示されます。 入門書には、『HTMLソースに<div class="contents">を入れないとIE5.xでは幅が固定されません』とあり、そこも記述してあります。 サーバーに上げてもプレビューと同じく反映されていませんでした。 5.xバージョンではないのに反映されないのはなぜでしょうか？ 以上、どうぞよろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- グローバルナビ部分の背景を画面幅いっぱいにしたいのですが、
グローバルナビ部分の背景を画面幅いっぱいにしたいのですが、 どうすれば良いのか分からなくて困っています。 まず、参考にしようとしているサイトが下記です。 http://www.oo-nagata.co.jp/ このサイトのようにグローバルナビ部分のとフッター部分の背景を画像で（画像ではなくても同じ事なのでしょうか、、。）画面幅いっぱいにしたいのですが、うまくいかなくて困っています。 ページの幅は960pxにCSSにて指定しているのですが、 幅を指定してしまうと当然その部分の幅は指定した幅になってしまいます。 よって背景画像は画面幅いっぱいにはならないのです。 ページの幅は指定し画面中央にくるようにしたいのですが、 どうすれば良いのでしょうか？
- ベストアンサー
- HTML
補足
遅くなり申し訳ありませんでした。 背景なんですが、全てをFlashで作りたいと思っています。 なので、Flashが呼びだされたときに 背景を全画面上にフェードインさせたいのですが。。 どんなアクションを設定すればよいのか分かりません。 お手数掛けますが引き続きよろしくお願い致します。 (言葉足らずで申し訳ありません)