• ベストアンサー

ページと背景画像との境界線の影の付け方

同じような質問なのですが少し違うのでご質問させていただきました。 ページと背景画像との境界線に影をつけたいのですが 背景の画像はどんなモニターのサイズでも画像の中心やデザインを変えたくなかったので http://webdesignrecipes.com/full-page-background-image-sample-01.html こちらのサイトを参考にcssで背景画像を配置しています。 よろしくお願いいたします。

noname#155897
noname#155897
  • HTML
  • 回答数2
  • ありがとう数3

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

質問の意味がわからないのですが ＞ページと背景画像との境界線に影をつけたいのですが 　ページと言うとディスプレイ全体のことを言うことが多いと思いますが、そうすると「ページと背景画像の境界」がどこかわかりません。 a)　ページ全体に背景画像を置き、その上に記事が書かれているブロックを中央に配置して、そのブロック周囲に影を付けたいということでしょうか？ b)　それとも、記事ブロックに背景画像を置きその内部に影を付けたいということ？ c)　それとも、率直に「境界線に影をつけたい」ということですか？ d)　その影は外だけ？ ＞背景の画像はどんなモニターのサイズでも画像の中心やデザインを変えたくなかった e)　「デザインを変えたくなかった」ということは背景画像も伸縮するのですか？ 　モダンブラウザならどれもできるとは思いますが・・・ 　

画像を拡大する
noname#155897
質問者

お礼

御礼が遅くなりスミマセン！ ページとはディスプレイ全体のことを指すのですね！確かに！ a)のことを聞きたかったです！。 丁寧に画像つきでこちらの質問に対応していただき本当に感謝です！ png画像で影をつけたら思うように影をつけることができました！ 丁寧なご回答ありがとうございました！

その他の回答 (1)

  • outbrave
  • ベストアンサー率60% (231/380)
回答No.1

中央の白いブロックに、両端に影の付いた白色の背景画像を表示させます。 画像の横幅は中央の白い部分に合わせて、縦は任意（5px～20px位）で作成して、縦に繰り返し表示させます。

画像を拡大する
noname#155897
質問者

お礼

回答していただきありがとうございました！ あれから自力でやってみたのですが 画像をjpgとして書き出すのではなく pngで背景は透明にしたものを書き出すと 後ろの背景が動いても （ウィンドウサイズを変えると背景の大きさが伸縮する） そのまま影がつくようにできました！ ご回答ありがとうございました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • CSSで背景とページの境界の枠に影をつけたい。

    表題どおりなのですが、 CSSで、背景とページの間の境界線に影をつけたいのですが、 やり方がわかりません。 参考までに以下のように、背景の灰色と、サイトの白の間の境界線にうすい黒い影をつけたいのです。 http://www.sanyo.co.jp/ テーブルならできるのですが、CSSだとちょっとわかりません。 詳しい方、恐れ入りますがご教授願います。

    • ベストアンサー
    • CSS
  • 画像に影付画像を背景に設定、影を上手に表現するコツ

    ホームページに影付きの画像を使用したく、 下記サイトを参考に作成しました。 All About form「画像を加工せず、複数の画像に「影」を付加」 http://allabout.co.jp/gm/gc/23995/ イラストレーターで影を作り、 フォトショップで画像化しました。 質問したいことは下記（１）～（３）です。 （１） サンプルの画像ですが、 左側の影のみが背景用に使用した画像で 右側がFirefoxで実際に表示した結果です。 左側のピンク色は、影の周りの余白の多さを 見せたかったから付けました。 かなり余白が多い気がします。 それを切り取ろうとしても 影がどこで終わっているのか分からず、 下手に手を出せませんでした。 この余白は気にする必要はないですか？ （２） サンプル画像を見て頂くと、左側＝右側、 とはならず影の形も濃さも変わってしまっています。 ＝にするコツがあれば教えて頂きたいです。 （３） 上記の参考サイト内で 「影の部分は、右側が幅7ピクセル、下側が高さ8ピクセル」 と、正確に寸法を把握しているのですが、 どのようにすれば分かるのでしょうか？ 自分は、1px単位で何度も何度も微調整しましたが、 把握する方法があればとても助かります。 お願いします。 ～～～　入力したソース　～～～ <style type="text/css"><!-- #shadow{ margin-left: 100px; margin-top: 100px; } #shadow img{ background-image: url("shadow_image.jpg"); background-repeat: no-repeat; background-position: right bottom; padding: 0px 60px 60px 0px; } --></style> <div id="shadow"><img src="sample.jpg" width="600" height="399"></div>

    • ベストアンサー
    • HTML
  • 背景にグラデーション、外枠に影をつけたい

    http://www.musclemusical.com/ ドリームウィーバーでこちらのサイトのように、 背景はグラデーション、更に外枠テーブルの左右と下に影をつけたいと思っています。 調べていたところグラデの背景は、 cssスタイルのbodyでバックグラウンドで指定するということで、 やってみたら成功したのですが、 ネットで外枠の影のつくりかたを調べたところ、それもbodyタグを使うとなっていました。 両方bodyタグのbackgroundで指定できるのでしょうか？ どちらかしか使えないようなのですが.... CSS等ははじめてでさっぱり分かりません。 言っている事が意味不明かもしれませんが、 背景と外枠の影と両方どう実現すればいいか教えていただけると嬉しいです。 宜しくお願い致します。

  • Publisher利用したWEBページ作成【背景画像をスクロールしない】

    Microsoft Office Publisher 2003でWEBページを作成しています。 背景画像をスクロールさせないにはどうしたらいいですか？ こんな感じにしたいです。 http://www.tagindex.com/stylesheet/page/background_image4.html

  • 背景をいっぱいに・・。

    お世話になります。 実は、背景をどんなブラウザーでもいっぱいに表示したく色々調べましたが 今一分からないのです。 調べた結果コチラ様のものを参考にさせて頂いておりますが http://webdesignrecipes.com/how-to-full-page-background-image-with-css-and-jquery/#anc1 「クラスをつけた画像」とか「ここにコンテンツ」とか何をどう入れればいいのかが 分からないのです。 初心者なもので、くだらない質問で申し訳御座いませんがどなたか詳しくお教え頂ければ幸いです。 よろしくお願い致します。

  • 背景画像だけをはみ出して表示させたい。

    CSSについて質問です。 よろしくお願いします。 CSSで背景画像だけをはみ出して表示させたいのですが、 やり方がわかりません。 例えば、exampleというIDをつけている要素があって、 中のテキストははみ出さずに背景画像だけをはみ出して表示させたいです。 ===CSS=== #example{ background-image:url(images/backimage.gif); background-repeat:no-repeat; } ===HTML=== <div id="example">背景だけはみ出したい！！</div> overflowを使うと中のテキストがはみ出してしまいますが、 何かいい方法はありませんでしょうか。 具体的には横幅180pxのサイドバーに182pxの背景画像を付けて 枠を作ろうとしています。 ご教示の程よろしくお願い申し上げます。

    • ベストアンサー
    • HTML
  • cssで背景画像が貼れない

    background-image: url(××.gif) ｃｓｓで背景画像を表示させたいのですがこのタグだとどうしても 表示されません。 画像は同じフォルダにあります。 どなたかご教授願えませんでしょうか お願いします。

  • 上部と下部にx-repeat∞の背景画像を置きたい

    html { background-image: url(../images/design_02.jpg); background-repeat: repeat-x; background-position: top; } body { font-family: sans-serif; color: #333333; background-color: #ffffff; background-image: url(../images/design_47.jpg); background-repeat: repeat-x; background-position: bottom; } でcssを組んでいます。 画面一杯に、ヘッダーを含めた上部、フッターを含めた下部にグラデ背景を乗せたデザインにしたいのですが、上記cssでは緩衝しあうのか、bodyで置いた画像しか表示されません。 このようなデザインにしたい場合、どのようなcssにすれば良いのでしょうか。

    • ベストアンサー
    • CSS
  • WEBページの背景に画像を連続配置する方法

    WEBページの背景に画像を配置したいと考えています。 bodyの途中から画像を連続で配置したいのですが、 以下のようにCSSで指定しても左上から連続で画像が配置されてしまいます。 ※上から175pxのところから連続で画像を出したいです。 background: transparent url(../images/bg.gif) repeat 0px 175px; background-positionを指定する場合、 background-repeatはno-repeatじゃないとダメなのでしょうか？ 現状、bg.gif自体を画像を連続して配置したような 大きい画像にしてno-repeatで設置しています。 背景の途中から同じ画像を連続配置する方法を 教えていただければ幸いです。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • WindowsのFirefoxでの背景画像の表示（CSS）

    WindowsのFirefox（Ver.2.0.0.12）での背景画像の表示について質問です。 下記の様なCSSで、下寄せでX方向に画像を並べ、グラデーションで背景色と馴染むようなデザインにしたいのですが、背景色しか表示されません。 他のブラウザでは上手くいくのですが、原因がわかりません。 Dreamweaverで作っております。 body { background-image: url(img/site/bg.jpg); background-repeat: repeat-x; background-position:bottom; background-color: #826243; } どなたかご教授いただけませんでしょうか。 宜しくお願いいたします。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する