- ベストアンサー
DreamWeaverによる背景イメージの固定
タイトルの通りなのですが、似たような質問の解決方法を見ても無理だったので質問させていただきます、 DreamWeaver CS3で背景にイメージ(PNGファイル)を設定しました、イメージの大きさは1024×768(px)です、webぺージもその大きさで作ろうと思ってます。そこで、以下のどれかにしたいと思っているのですが素人なので、試しては失敗しております、例えば １、ブラウザを1024×768以上、以下のサイズにしたときに常にその背景がリキッドのように自動で拡大、縮小してくれる。 ２、背景だけを残し、その他の文字等は、スクロールできる。 それと条件がありまして、imgをリピートさせたくない(グラデーションで且つ、大きいのでリピートさせると変な所で切れ繋いだりする) あと、background attachment = fixed;にしても、ブラウザでプレビューを行うとブラウザのサイズが1024×768になってればOKなんですが。それ以上のサイズに設定されていると変な所で切れてしまっています。 雑多な文になっておりますが、最終的にはブラウザ上で背景のデザインのみ（ブラウザのサイズに左右されない背景）を固定をしたいのです、それ以外でもこんな方法で良くなる等があればよろしくお願いします。m(_ _)m
- bootcut
- お礼率77% (45/58)
- ホームページ作成ソフト
- 回答数2
- ありがとう数13
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
＞背景画像の自動拡大・縮小 たぶん無理だと思います。 ＞リピート禁止 background-repeat:no-repeat; を追加指定。 ＞ブラウザサイズに左右されない背景 例えばですが、（どんな画像なのか不明なので適当ですみません） １）その画像とページのレイアウトの横幅を統一し、左端寄せもしくはセンタリングする。 ２）他の画像で考えてみる。幅の狭い画像を横にリピートさせれば、モニター解像度に左右されません。
その他の回答 (1)
- yuuu69
- ベストアンサー率29% (8/27)
背景画像の大きさの設定はCSS 3で追加された"background-size"で設定できるようですが、Safari 3とOpera 9.5しか対応してないようです。Safariでは"-webkit-background-size"、Operaでは"-o-background-size"を使用します。これで、大きさを％で指定すればウィンドウサイズに応じて変化するようになるのではと思います。（未確認ですが）
お礼
そんな機能もあったのですね！ありがとうございました！もっと勉強します！！
関連するQ&A
- グラデーション背景と画像固定背景
こんにちは。 ホームページ作成初心者の者なのですが、ページの背景をグラデーション背景の上に固定した画像背景を乗っけようと考えているのですが、グラデーション背景のタグを入れると画像背景のタグが無効になってしまいます。この二つを同時に有効にする事は不可能なのでしょうか。 ちなみにタグは <HEAD> <STYLE> <!--BODY { background-image : url(back2.gif) ; background-repeat : no-repeat ; background-position : 90% 90% ; background-attachment : fixed ;} --> </STYLE> <STYLE> <!-- body{ filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr='#68b4ff',endcolorstr='#ffffff',gradienttype='1') } --> </STYLE> （省略） </HEAD>
- ベストアンサー
- ホームページ作成ソフト
- ブログの背景画像のサイズを固定したいです
宜しくお願いします。 ブログの背景画像を変更したく、一枚の写真（フリー素材です）を使用しブログの背景に設定したのですが、スマートフォンの所謂PC表示にすると画像が拡大してしまいぼやけた状態になってしまいます。 デスクトップ、ラップトップPCのブラウザですと普通に表示されます。 スマホ用PCブラウザではなぜか画像が異常に引き伸ばされてしまうのです。 CSSではライブドアブログのかんたん背景画像という機能を使用しており、 /* かんたん背景画像 */ body.show-bg-image { background-attachment: fixed; background-repeat: no-repeat; background-size: cover; のように設定されています。 スマートフォン用のPCブラウザからでもデスクトップPCブラウザで見たときのように画像を固定（一枚絵）し、サイズもスマートフォン向けPCブラウザで見たときに適合するようにしたいのですが方法が分かりません。 自分でも色々調べ、リピートの設定やスクロール、コンテイン等をいじってみましたが素人知識ではまったく改善されず困っております。 お詳しい方是非ご教授、お力添えを頂きたく存じます。 宜しくお願い致します。
- ベストアンサー
- CSS
- 背景を固定した時の表の背景
こんにちは。ＨＰを制作し始めたばかりの初心者です。 質問です。 背景をこんな感じて固定した時 <STYLE type="text/css"> <!-- BODY{ background-image : url(○○.jpg); background-repeat : no-repeat; background-attachment : fixed; background-position : 90% 50%; } --> 作ってる表の背景画像が無効になっちゃいます。 なんか間違ってるんでしょうか？？？ お答えを頂けると有り難いのですが。
- ベストアンサー
- HTML
- DreamwerverMX2004での背景固定がうまくいきません
お世話になります 実は、背景固定を<head></head>内に指定したのですが、ブラウザでうまく見れません。 ドラッグすると文字がザーっと下につながるようで通常ありえない画面になります。 リンクの際には今の画面と次の画面が重なるように一緒に出てしまいます。 タグは以下の通りです <STYLE type="text/css"> <!-- BODY { background-image : url(sozai/tulip_white01.jpg); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat ; } --> </STYLE> 尚、ブラウザチェックエラーのコメントは background-repeatは再描画上の重大な問題の原因になることがあるため、使用を避けてください となります すみませんが、とても困っています。 誰か教えてください！
- 締切済み
- ホームページ作成ソフト
- 固定背景画像と画面幅について
初心者のため、分かりづらい質問になると思いますがお許しください。 background-repeat:no-repeat; background-position:right; background-attachment:fixed; 上記のようなCSSで背景画像を固定しています。 画面幅は918pxで設定していますが、これをプレビューで918px以上に伸ばすと、背景画像がどんどん右にズレていってしまいます。 画面環境はそれぞれだと思うので、大きな画面で見た方が背景画像が切れてしまうのを避けたいです。 画面幅918pxで固定をしたいのですが、どのようにすればいいのでしょうか？ 何か補足事項があればすぐに追記します。 よろしくお願いします。
- ベストアンサー
- CSS
- 背景固定タグ
ＨＰ作り初心者です。 http://m-space.jp/でＨＰを作成しています。 背景を固定したくていろいろ調べたんですが、 うまくいきません。 ある、素材サイトで <STYLE type="text/css"> <!-- BODY { background-image : url("壁紙のURL"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat ; } --> </STYLE> を<head></head>の間にはさんでくださいとかいてあったんですがよくわかりません・・。 説明不足ですみません。 初心者なんで、詳しく教えていただきたいです。
- ベストアンサー
- その他（インターネット・Webサービス）
- スマホブラウザでの背景固定
以下のＣＳＳで背景画像を固定しようと思っています。 ＰＣでは問題なく固定されるのですが、スマホだと 背景画像が固定されず、画面をスクロールすると一緒にくっついてきます。 スマホの場合は別の対処が必要なのでしょうか？ body { margin:0 auto; text-align:center; padding:0; background: url(../images/photo01.jpg); background-repeat:no-repeat; background-position:center bottom; background-attachment:fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
- ベストアンサー
- CSS
- ２つの背景画像固定がうまくいきません
(1)一番下に細かい画像をrepeatさせた背景を、 (2)その上に大きい画像をno-repeatで中央に表示させ、 どちらも固定させて、その上にテキストやテーブルを表示したいのですが、(2)のbackground-attachment : fixed だけうまくいかずスクロールされてしまいます。 過去の質問に同様の内容があり、それへの回答を参考にしたのですが・・・。 http://oshiete1.goo.ne.jp/qa1133735.html どなたか解決方法を教えて下さい。
- ベストアンサー
- ホームページ作成ソフト
- ホームページビルダーＶ９での背景固定について
ホームページビルダーＶ９を使っています。 そこで、背景を固定したいのですが上手くいきません。 ソースに下のようなタグを入れても画像が表示されないんです。 どうしたら良いか教えてください。 <STYLE type="text/css"> <!-- BODY { background-color: #------; background-image : url("画像のURL"); background-attachment: fixed; background-position: 50% 50%; background-repeat: no-repeat; } --> </STYLE>
- 締切済み
- ホームページ作成ソフト
- gaiax系ページでの背景の固定
こんにちわ。 先日、背景を固定して文字だけスクロールしたいという件で質問しましたところ、スタイルシートをつかったり、bodyタグでの方法を教えて頂きました。ところが、私のページはgaiaxであり、デザインの変更の背景URLのところに教えて頂いたスタイルシートなどのタグを張り付けてみたところ、背景はうまく固定できたのですが、今度は画面の左上に文字の色などを示すタグが勝手に表示され、こちらで設定した文字の色なども無効になってしまいました。スタイルシートではこちらを張り、 <STYLE TYPE="text/css"><!-- BODY{ background-image:url("画像の名前"); background-repeat : no-repeat ; background-attachment : fixed; background-position: bottom right;} --> </STYLE> bodyタグではこちらを試してみました。 <BODY background="○○○" bgcolor="○○○" bgproperties="fixed"> ・・・・・ </BODY> いずれにしても変なタグが画面上部に勝手に表示されてしまうんです。 それに文字なども私は白で設定したのですが、勝手に黒になってしまいます。 どうしたらよいのでしょうか？ メインのお知らせ欄に張るということも考えてみたのですが、 そうすると、日記画面での背景は別になってしまいますよね？ 御回答よろしくお願い致します。
- ベストアンサー
- HTML
お礼
>(＞背景画像の自動拡大・縮小→たぶん無理だと思います。) やっぱりそうですか、ありがとうございます。 後、１，２の方法もありがとうございます☆ 試してみます☆