CSS/背景画使用時のメインコンテナ左右のデザイン

このQ&Aのポイント
  • CSSを使用した背景画像の場合、メインコンテナの左右に特定の効果を与えたい場合は、透過したpng画像を使用する方法が一般的です。
  • ただし、IEでは透過したpng画像が正しく表示されない場合がありますので、他の方法も検討する必要があります。
  • デザインには、シャドウをつけるだけでなく、紙をちぎったような効果を出す方法もあります。
回答を見る
  • ベストアンサー

CSS/背景画使用時のメインコンテナ左右のデザイン

タイトルが不明瞭で申し訳ありません。 添付画像を見ていただくと分かるかと思うのですが、 背景が無地ではなく、画像を使用している場合に メインコンテナーの左右に画像のような効果を付けたい場合は 左右部分に使用する背景用画像を透過し、pngで保存して使用すれば いいのでしょうか? 単にシャドーをつけるのではなく、こういった紙をちぎったような効果を出したいのですが…。 IEで透過は見れないなどと色んな所で見たのですが 一般的にpngの透過画像は使わない方が良いのでしょうか? 初心者故おかしなことを言っていたらすみません…。 添付画のようなデザインにするには どのような方法があるのかご助言を頂けたら幸いでございます。 宜しくお願いします。 ※添付画のサイトは現在工事中のようで、ソースが見れませんでした。

この投稿のマルチメディアは削除されているためご覧いただけません。
  • HTML
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • noris02
  • ベストアンサー率74% (56/75)
回答No.1

2枚の画像(gifでも pngでも)を、重ね合わせて 背景表示しているんだと思いますよ。 body{background:url(下の背景画像 2000pxくらい × 高さはご自由);} .wrap{background:url(コンテンツの背景画像 コンテンツの幅 × 高さは自由)で 背景画像を真ん中に設置;}

gematria666
質問者

お礼

遅くなりましたがありがとうございました。

関連するQ&A

  • CSSでよく作られる背景の作り方を教えてください。

    お世話になります。CSS初心者の者です。 もしかしたら基本的な質問だと思いますが初心者の私には分からなかったのでどうか詳しい方教えてください。 現在ウェブサイトを作成しているのですがいろんなサイトでよく見るような中央揃えで伝えたい情報を載せて、左右には背景色なり背景画像なりが表示されるような背景はどうやって作るのですか? 調べたところCSSを使っているというのは分かったのですが肝心のCSSソースというものが分かりませんでした。 疑問になっているのは ・ブラウザサイズに関係なく中央にメインの情報ページを置くにはどうしたらいいのか? ・中央部分の両端にドロップシャドウのような効果を出すには? といったようなことです。 参考までにこういうような効果を出したいというサイトを載せておきます。正直困っています、どうかよろしくお願いします。 http://www.msgallery.jp/ http://www.uc-company.co.jp/ http://www.nkk-sys.com/index.html

  • CSSで左右の背景が異なる設定方法

    添付している画像のように左右の背景が異なるCSSを作成したいのですが、 下記のサイト等を参考にしましたが、FFとOperaのみ表示され、 GoogleChromeやIEその他のブラウザでは表示されません。 http://www.webopixel.net/javascript/517.html お分かりになる方どうぞご教授ください。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • CSSのみでPNG画像を透過グラデーションさせたい

    画像編集ツールを用いて作ったアルファチャンネルPNGと同様な「透過具合のグラデーション」を、PNGなど写真の画像ファイル全般に対して、CSSのみで再現することは可能でしょうか? CSS自体で作った背景を透過グラデーションさせる方法は見つけられましたが、画像ファイルに同様の効果を付与する方法を見つけられないでいます。 ご助言を頂けると幸いです。

    • ベストアンサー
    • CSS
  • 画像の透過の件です

    イラストを作って背景を透過して新規ページに貼り付けていました 今までは綺麗に透過になってましたが、昨日からPCの不具合が生じまして今朝に回復したのですがHPのpngの画像の背景画透過になってません フォルダ内の背景色が表示されてるのですが此れを透過させてアップさせるには如何したらいいのでしょうか?

  • HTML・CSS・背景画像半透明化

    body背景画像を活かしつつ、もう一枚の画像を前に持ってきて、透けさる 方法 皆様お忙しい中、申し訳ございません。 今、ホームページを作成中でして、body背景に画像を持ってきて、その上に 文章を持ってきたら文章がはっきりしないので、背景画像を活かしつつ文章の前に半透明化の#000000を70%位の濃さで残し、これはたぶんFLASHだと思いますが、この様な感じで、(黒い透けた真ん中画像) http://store.honeyee.com/製作したいと思っております。 (HTML、CSSで) CSSではこの様な形でやってみたんですが、bodyより上の画像がすべてすけてしまいレイアウトできませんでした。 filter:alpha(opacity=43); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; GIF、PNGの文字周りの透過ではなく一枚のイメージの透過を教えて 下さい。 宜しくお願い致します。

  • IllustratorでのWEB用保存がうまくいきません

    Illustrator10.0(9.0でも)でホームページに使用する画像を作っています。(写真も含みます) 画像全体をWEB用で保存して、その画像をホームページビルダーで 取り込もうと思っており「WEB用に保存」で保存をかけました。 写真もあるので、形式は「PNG-24」にしました。 背景は透過されて保存されているハズなのですが(透明部分にチェックは入れてあります) 実際にホームページビルダーで画像を挿入すると、透過されている ハズの背景が透過されず薄いグレーのような背景になってしまいます。 「PNG-8」にすればきちんと透過され、ホームページビルダーでの 背景(壁紙)がきちんと見えます。 ただ、PNG-8にしてしまうと画像全体が荒く写真などザラザラです。 PNG-24で保存した画像をホームページビルダーで透過させて表示 させるにはどのようにしたら良いでしょうか? HPには背景を使いたいです。

  • 人物のみの動画(白背景)と背景画を合成したいです【after effect/手描きアニメ】。

    動画に関係するソフトとしては、after effectを持っています。 動画サイトにある手描きアニメを作るため、質問させて頂きました。 静止画の背景の上に、人物の動作のみ(背景白)の 動画(aviでもgifでも何でも可)を重ね合わせて 一つの動画にしたいのですが、どうも方法がわかりません。 人物の動作一コマづつを、いちいち背景と合成して 作るしか方法はないのでしょうか? 静止画の透過は出来るのですが、 (フォトショップでPSDファイルとして保存、使用する) 既に動画として成り立っているものの白い背景を透過し、 after effectで、そのまま使用する方法を教えて頂けると助かります。 after effectに限らず他に有効な手段があるのでしたら、 それもお聞きしたいです。 閲覧ありがとうございました。

  • 透過PNGの左右反転について

    透過されたPNGを透過されたまま左右反転(できればリサイズも)したいのですが、どうすればいいでしょうか? ちなみに「キャラクターなんとか機」というソフトで作った画像です。 ペイントなどで一旦左右反転してから保存したものを、 背景色を指定して再度透過すると画像が汚くなります(画像の輪郭にところどころ余分な色が残ってしまう) どなたか、解決策を知っているかた、教えてください。

  • フォトショップデータからキレイにGIF画像にするには?

    フォトショップデータからgif画像に保存する際、 ドロップシャドウに透過がかからず、白くつぶれることがあります。 背景が透明のときにおこりました。 背景は透明なままで、レイヤー効果もキレイに画像に するには、どうしたらよいが教えていただけませんか? よろしくお願いいたします。

  • アルファチャンネル対応のフリーグラフィックソフト

    こんにちは。 WindowsXPでPNG画像を作成しているのですが、 透明度付きPNG画像を作ってみたいと思っています。 そしていろいろ調べてみたら、アルファチャンネルというものがPNGの透明度の操作をしていることが分かりました。 そして、背景などを100%透過させることは出来るようになりました。 しかし、50%透過などのやり方がイマイチ分かりません。 現在、PictBearを使用して画像を加工しておりますが、PictBearでは100%透過させることしか出来ないのでしょうか? 出来ないとしたらフリーソフトでアルファチャンネルの操作が出来るソフトを教えてください。 m(_ _)m