2重に背景画像を指定して画像の透過に失敗してしまう問題
- htmlのbackground-imageプロパティとbodyのbackground-colorプロパティを指定しても画像の透過に失敗してしまいます。
- 背景画像を重ねる方法を試した結果、黄色い部分が透過されず白背景になってしまいました。
- サイトに掲載されている方法に従っても解決せず、アドバイスを頂きたいです。
- ベストアンサー
2重に背景画像を
質問をさせていただきます。 画像のようにこれまでは 赤のBのみをbodyに指定して パターンイメージを並べていました。 そこでその上にAの様な横だけに並べるPNG画像の背景が 欲しいとおもったところこのようなサイトを見つけました。 ttp://www.bnote.net/css/css_layout/tips_html_back.html このサイト方がおっしゃられている様に htmlにback-groundでBを指定 bodyにAを指定すれば出来る！ と思ったのですが上手くいきません。 htmlにBを並べるのは成功しました。 しかしbodyにAを指定してはめこむと pngの黄色い部分が透過されず白背景になってしまいました。 bodyにbackground-color: transparent;を指定したりと 試しましたがなんとも上手くいきません。 何かアドバイス等ございましたらよろしくお願いします！ 今は html { background-image:url(○○○○○.gif) } body { height : 100%; text-align:center; font-size:16px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 1.6; background-color: transparent; background-image:url(○○○○○.png); background-position: left top; background-repeat: repeat-x; } となっております。
- origami-enjoy
- お礼率63% (21/33)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- bodyから左右に15pxずつ背景画像をのばしたい
cssの基本設定ですが、 背景色をひき、さらにbodyから左右に15pxずつ背景画像をのばしたい という設定を試みていますがうまくいかずご教授いただけたらと思い書き込みさせていただきました。 背景色が #9999cc これを全面に表示し 背景画像を width 800pxで作り下にリピート そしてbodyが width 770pxの #ffffffの白色です。 そして cssで記述して表示してみたところ safaiではきちんと表示されるのですが、firefoxではbodyの幅までしか背景画像が表示されていません。 bodyから左右に15pxずつ背景画像をのばしたいのですが、どうやればよいでしょうか。 現在の状況ですが、 /* ここからcss ------------------------------------ */ *{ color: #333333; font-size: 12px; line-height: 20px; text-decoration: none; margin: 0; padding: 0; word-wrap:break-word; } html { height: 100%; margin: 0px; padding: 0px; background-color: #9999cc; background-image:url(../img/bg.jpg); background-position:center; background-repeat:repeat-y; } body { margin: 0px; padding:0px; color: #333; text-align:center; font-family:"メイリオ",Meiryo,"MS Pゴシック", Osaka, sans-serif; } 本当に困っております。 誰かわかる方がいらっしゃればよろしくおねがいいたします。
- ベストアンサー
- CSS
- 背景画像を二つ指定
こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。 URLはこちら http://ic.web6.jp/portfolio/rigtig.html 全体の背景はbodyに、 コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。 どうすればIE以外でもうまく表示されるでしょうか？ 背景を指定しているCSSはこちら body { width : 762px; margin : 0 auto; background-image : url("images/top_bg.gif"); line-height:1.4; font-size:10pt; } div#wrap{ width : 762px; background-image : url("images/body_bg2.gif"); background-repeat: repeat-y; }
- ベストアンサー
- HTML
- 上部と下部に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
- IE,Firefoxでbodyの背景画像が表示されません。
IE8とFirefox3.0で、 cssでbodyに入れている background-image、background-colorがどちらも適用されません。 Sleipnir2.8.5ではきちんと表示されます。 ですので、htmlはあっているかと思います。 一通り、タグぬけがないかとかも、調べてみましたが、 特にないようです。 いろいろ調べてみましたが、わかりません。 hasLayout対策とかも試してみました。 （width や position をいれるなど） 下記がbodyのcssです。 body { color: #333; text-align: center; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; background-color: #FFFF66; background-image: url("img/bg.jpg"); background-position: center top; background-repeat: repeat-y; margin: 0px; } 教えていただけると、 大変助かります。 よろしくお願いいたします。
- 締切済み
- その他（プログラミング・開発）
- <td>内で背景縦100%リピートする方法
こんにちは。 現在ホームページを作成しているんですが、 凄く簡単そうなところで躓いてしまってます＞＜ どうも上手くいかなくて… 分かる方いらっしゃったらご教授ください!! 今<td>内の背景をCSSで100%縦にリピートさせようとしています。 どうしてもCSSを使わなくてはいけないのは、 pngの透過をCSSでfilterを用いてbackgroundとして使ってるからです。 いくつか参考になりそうなサイトはあったんですが、 filterを使ってるからか（多分自分のミスだと思いますが；）上手くいきません。 今やりたいと思っているのはこんな状態です。 ■■■■■■■ ⇒<img src="イメージ1" width="200" height="10"> □□□□□□□ ⇒CSSで縦リピートしたい部分 □□□□□□□ □□□□□□□ □□□□□□□ ■■■■■■■ ⇒<img src="イメージ2" width="200" height="10"> これが<td height="100%" id="test"></td>の中に入ってる感じです。 ■（黒い四角）は角丸のにしたかったのでイメージにしました。 でもこうしてCSS上で□（上記の白四角の部分）の高さを 100%にすると、下のイメージ2の部分が消えて見えなくなってしまいます； ■の部分と□の部分をテーブルで分けてもダメでした。。 因みにCSSは以下の方法を試しました。 (1)普通に100%指定 height: 100%; (2)htmlとbodyにも指定 html, body { height: 100%; } body > #test { height: auto; } (3)htmlとbodyにも指定その2 html, body { height: 100%; } body > #test { height: 100%; } height98%とかも試したんですが、 2カラムの縦の高さをそろえたいとなると、 ブラウザやフォントサイズによってばらつきがでるので、 非常にこまってます； どなたか分かる方いらっしゃったら教えてもらえませんか？ 宜しくお願い致します。
- 締切済み
- HTML
- 背景画像を2枚使いうまく繰り返す方法
htmlとcssでホームページを作っています。 背景画像を2枚使用しているんですが、どうしてもうまく表示されません。 1枚目はページ上部に。 2枚目はその下からすべて。 で、それぞれ横にリピート。 2枚目だけ縦にリピートして表示させようとしてます。 最初はbodyとdivで -------------------css-------------------------- body { background-image:url(""); background-repeat:repeat; } div.body { background-image:url(""); } ----------------html-------- <body> <div class="body"> 内容 </div> </body> --------------------------------------------- としています。 ですが、これだとdivのボックスができてしまい、横に無限に繰り返されないことになります。画面を縮小した時に切れてしまいます。 なので、htmlとbodyにそれぞれ背景をつけたんですが、 今度は両方の画像が表示されませんでした。 html { background-image:url(""); background-repeat:repeat-x; } body { background-image:url(""); } htmlのほうを消すと、bodyで指定した画像が縦横無限に繰り返されます。 htmlを消さずにbodyを無限に表示されるにはどうしたらいいですか？
- ベストアンサー
- HTML
- cssで角丸で一部の画像だけを変更したい。
cssで角丸テーブルにトライしています。（参考にしたサイトhttp://jmblog.jp/archives/94） これをアレンジして、左上の画像（タイトル部分にする）のみを枠によって変えたいと思っています。<span class="taiken"></span>のクラス名を変えることで画像を変えられると良いのですが、 でもどうしても上手く行きません。どうぞどなたかお助け下さい。 ＊＊＊＊＊＊＊＊ＨＴＭＬ＊＊＊＊＊＊＊＊＊ <div class="dialog"> <div class="header"><span class="taiken"></span> <div class="c"></div> </div> <div class="body"> <div class="c">テストテスト</div> </div> <div class="footer"> <div class="c"></div> </div> </div> ＊＊＊＊＊＊＊＊ CSS ＊＊＊＊＊＊＊＊ .dialog { width:698px; } .dialog .header .c, .dialog .footer .c{ font-size:1px; /* ensure minimum height */ height:20px; } .dialog .header span.taiken{ background-color: transparent; background-image: url(../pic/head_r1_c1.gif); background-repeat: no-repeat; background-position: 0px 0px; height: 37px; } .dialog .header .c{ background-color: transparent; background-image: url(../pic/head_r1_c2.gif); background-repeat: no-repeat; background-position: right 0px; height: 37px; } .dialog .body{ background-color: transparent; background-image: url(../pic/body_r2_c1.gif); background-repeat: repeat-y; background-position: 0px 0px; } .dialog .body .c{ background-color: transparent; background-image: url(../pic/body_r2_c2.gif); background-repeat: repeat-y; background-position: right 0px; } .dialog .footer{ background-color: transparent; background-image: url(../pic/footer_r3_c1.gif); background-repeat: no-repeat; background-position: 0px 0px; } .dialog .footer .c{ background-color: transparent; background-image: url(../pic/footer_r3_c2.gif); background-repeat: no-repeat; background-position: right 0px; } 宜しくお願いいたします。
- ベストアンサー
- HTML
- 背景に複数の画像を入れることは可能でしょうか
HTML、CSSの初心者の者です。 下記のように、CSSで背景に画像back1.gifを右上に入れているのですが、画面の右下にもう一つの画像back2.gifを入れることは可能でしょうか？ もし可能なら、方法を教えて下さい。 初心者向けに易しくご説明頂けると幸いです。 body { background-color:yellow; background-image:url(image/back1.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right top; }
- ベストアンサー
- HTML
- ｈｔｍｌ・cssによる背景の2重設定
HP制作をしているのですが… 少々デザインを凝ってみようかなー、と考え、 背景の2重設定を思いついたのですが、どうしても表現できないのです。 私が言う背景の2重設定とは… 背景Aと背景Bがあり、背景Aは固定されているのですが、背景Bは画面中央に表示される－というものです。 画面をスクロールをしても背景Bは常に画面中央に表示されていて背景Aの上に背景Bは存在する－という形になっております。 私が試したhtml・cssを以下に記載したいとおもいます。 <html> <head> <title></title> <style type="text/css"> body{ background-image: url(B.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; } </style> </head> <body background="sozai/haikei/A.gif"> <table width="100%" height="1500" border="0" cellpadding="0" cellspacing="0"> <tr><td> </td></tr></table> </body> </html> －とこのような形になっております。 背景Aを透過gifを用いて背景Bを表示させようと試みたのですが、画面全体に透過gifを用いるとスクロール時に読み込みに時間がかかって…大変ユーザーに見にくくなってしまいました。 質問の回答の程、どうかよろしくお願いいたします。
- 締切済み
- HTML
- 背景画像上にテキストを配置したボタンについて
今晩は。 いつもお世話になっています。 CSSで次のようなボタンを作りたいと思っています。 ・背景画像の上にテキストを乗せたボタン。 1)ボタン上のテキストを書き換えられるようにしたい。 2)ボタンはページによって同じ背景画像でサイズを変えたい。（指定した縦横幅に合わせて背景画像がリサイズされるようにしたい） 3)背景画像ごとリンクにしたい。 参考サイトを見て、現在以下のようなボタンを作ってみました。 1、2はクリアできたのですが、ボタン上のテキストではなく、背景画像自体をリンクにするにはどうすればいいでしょうか？ また、色々方法はあると思うのですが、今回のようなボタンを作る上でもっと効率の良いCSSがあれば、参考サイト等教えて頂けると幸いです。 -------------CSS-------------- div.photo{ width:100px; height:50px; background-image:url("xxxx.png"); background-repeat:no-repeat; position:relative; background-size:contain; float:right; } .text{ width:100px; position:absolute; top:8px;left:10px; color:#ffffff; line-height: 1.2; font-size:15px; } ------------HTML------------- <div class="photo"> <div class="text"><a href="#">テキスト</a></div> </div> 以上になります。 よろしくお願い致します。
- ベストアンサー
- HTML
お礼
ご返信ありがとうございます！ 遅れましてすみません。 そんな技があったのですね！ ありがとうございます！