• ベストアンサー

背景画像の繰り返し

CSSを用いたウェブページに、垂直方向にグラデーションのかかった背景画像を横に並べようと思っていますが、 この場合、幅1pxで容量の小さい画像を使うか、そこそこ幅があり、繰り返し回数を少なくできるものでは、どちらがよいのですか?

  • HTML
  • 回答数4
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.4

小スペックのPC環境や回線状況下で 小さな画像を 半無限に repeat させると スクロール時に揺れ(歪み)を感じる場合があります。 逆に大きすぎる画像なら表示するのに一瞬時間が掛かるので 数十px幅程度で適度な大きさの範囲内にするのが一番良いと思います。

その他の回答 (3)

noname#119957
noname#119957
回答No.3

幅は好きな幅でいいです。容量を小さくする場合は幅が小さい方がいいですが、それほど重要ではありませんよ。5pxくらい画像スライスは扱いやすいのでは?なお、グラデーションはJPGでスライスした方がいいようですね。グラデーションには、色相・彩度の2種類が考えられ、その組み合わせもあると思いますので、画像の方がバリエーションはあると思います。

noname#119957
noname#119957
回答No.2

cssで body { background: url(****.jpg) repeat-y; }

回答No.1

<body style="filter:progid:DXImageTransform.Microsoft.Gradient (gradientType='0',startColorstr='#000000', endColorstr='#999999"> </body> BODY内にこういう設定のほうがよくないですか? 単純グラデーションじゃない場合は別ですけど…。

関連するQ&A

  • Dreamweaver CS3で背景画像が表示されません

    セールスレター(ホームページ)の背景に画像を使いたいので CSSの「body」から背景→背景イメージの欄に使用したい画像を設定しています。 理想はグラデーション画像なのですが、 どんな画像を入れても表示されません。 (グラデーションでないものも、ファイルサイズ等に関係なく表示されません) jpg画像で同じフォルダ内に入っています。 背景色は問題なく表示されます。 ホームページ内の背景でない部分はdivで囲み影画像を背景にしてあります。 (幅680px,高さ指定なし マージン:左右自動、上下0 影の画像をY軸にリピート) body:(幅高さ指定なし、マージン上0、背景に入れたい画像) ページプロパティから背景画像を指定した場合は表示されますが、 ページのTOPのみグラデーションのある画像にしたいため リピートするとグラデーションが何度も繰り返されてしまいます。 そのため「固定」を使うためにCSSを使用しなければならないと思い CSSで表示する方法を探しております。 初心者なので何か初歩的なミスをしているかもしれません。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • photoshop7.0 両サイドが影のweb用背景画像をつくりたい

    中央寄せのホームページで、両サイドが少し影になっていて浮かび上がっているように見えるものがあると思うのですが、そういうものを作りたいです。 ソースなどから、横に細長い背景画像を繰り返し並べているのだということは分かりました。 そこで、photoshopでその背景画像を作る手順を教えていただきたくて質問させていただいています。 高さ5px×幅780pxの画像の両サイド10px分くらいをグレーから透明になるようなグラデーションをおく手順を作り方、保存方法など含めて分かるかたいらっしゃったらアドバイスをお願いいたします。 http://www.unouplus.com/uraunou/ こちらのサイトさんの右側みたいな感じで左右対称にしたいです。

  • dreamweaver☆背景画像の繰り返し

    dreamweaverMX2004で、作っております。テーブル内の背景画像の繰り返しをしたくないのですが、CSSスタイルをタグをtable、セレクタタイプをタグを選択し、新規作成をして、背景を繰り返さないにしたのですが、ページの中にある全てのテーブルに背景画像が出てしまいます。特定のテーブルだけに設定する方法はありませんか?どうぞ宜しくお願い致します。

    • ベストアンサー
    • CSS
  • 背景画像

    背景画像のCSSを教えてください wordpressのfooterのように、footer内のみに縦100px横幅1pxの画像で敷き詰めたいです 実際に横960pxに敷き詰められるようにしたいです #footer_in { position:relative; margin:0 auto; padding:0; width:960px; height:100px; background:url(../images/footer_bg.png) no-repeat center 13px; font-size:12px; } <div id="footer_in"> </div>

    • ベストアンサー
    • CSS
  • CSSで背景にグラデーション

    お世話になります。 CSSを用いて背景にグラデーションをかけようと苦心しています。 filter:alpha(opacity=100, finishopacity=0, style=1); で、グラデーションはかかるのですが、 そのタグ内の文字までグラデーションがかかってしまいます。 また、この方法ですと、Firefoxでは、グラデーションがかかりません。 Yahooのページ http://www.yahoo.co.jp/ では、背景画像を使わないでグラデーションをかけていると思うのですが、どのようにすればこのようなことができるのでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • スマホの背景画像について

    タイトル通りスマホの背景画像について質問です。 初めて作成するので、まずはいろいろ調べたところ縦向きが320px で 横向きが480pxなので一般的にデザインカンプを作る際は320pxで作る ようなのでその通りにしております。 縦向きの場合には、サイズが合っているので表示もおかしくないのですが 横向きにしてしまうと間が空きます。 こんな問題があるので、できるだけ画像は使わないようにとのこともありますが 背景画像を使う場合、うまく表示できる方法はありますか? 例えば、480pxで背景画像を作りcss3のbackground-sizeを使い縦向きであれば 320pxで横向きであればそのまま表示させるようにするとか思いついたのですがこの 方法はありでしょうか?

    • ベストアンサー
    • HTML
  • 背景画像

    cssで背景画像を指定する際、サイズなどの指定はできないのでしょうか? 例えば、縦100pxの画像を縦80pxに縮小して表示のような事はできるのでしょうか? ご教授ください。よろしくお願いします。

    • ベストアンサー
    • HTML
  • 固定背景画像と画面幅について

    初心者のため、分かりづらい質問になると思いますがお許しください。 background-repeat:no-repeat; background-position:right; background-attachment:fixed; 上記のようなCSSで背景画像を固定しています。 画面幅は918pxで設定していますが、これをプレビューで918px以上に伸ばすと、背景画像がどんどん右にズレていってしまいます。 画面環境はそれぞれだと思うので、大きな画面で見た方が背景画像が切れてしまうのを避けたいです。 画面幅918pxで固定をしたいのですが、どのようにすればいいのでしょうか? 何か補足事項があればすぐに追記します。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • グラデーション背景色について

    お世話になります。教えてください。 現在ホームページ作成中ですが、背景色に上部から下部へのグラデーションにしたいと思っています。画像編集ソフトで、上部(#0000FF)、下部(#FFFFFF)で作成し、いざページ作成をおこないました。ページの下部のCSS枠の背面色を#FFFFFFにして最下部は背景と境が分からない様になると思っていましたが、微妙に色合いが変わってきます。なぜなのでしょうか。 また、CSSにて背景グラデーションではIE以外では表示されないのでちょっと使えないです。 よろしくお願いいたします。

  • 背景画像が切れてしまう

    HPビルダーで作っています。 背景画像のファイル、1000×1200のものを使用してページを作ったのですが、パソコンによって、背景画像がつながって見えるようで、画面の右側10センチくらい、つぎはぎのようになってしまっています。 下へ行ったときも同じです。 ビルダーで、ページの大きさを幅800で指定しているのですが、直りませんでした。 どのようにしたらツギハギのようにならない1枚の背景画像として入れることが出来るのでしょうか。 また、ビルダーで幅を設定してもあまり意味はないのでしょうか。 お願いします。

専門家に質問してみよう