ココログのCSS編集で背景画像が重ねられない問題の解決方法

このQ&Aのポイント
  • ココログのCSS編集による背景画像の重ねられない問題についてご質問です。
  • 質問内容によると、元のシートが前に出てしまって画像が重ねられないとのことです。
  • 色々試したが解決できなかったため、ご指導をお願いします。
回答を見る
  • ベストアンサー

ココログのCSS編集について

よろしくお願いします。 cocolog-nifty.com のブログでCSS編集をしております 編集内容はこちらです body { background-image:url(http://******.cocolog-nifty.com/photos/uncategorized/2012/09/18/img_1592a.jpg); background-repeat: no-repeat; background-position: bottom; } 質問内容は 元のシートが前に出てしまっており画像が重ねられません 色々試しましたが出来ませんでしたのでご指導をお願い致します。

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

  • ベストアンサー
  • tacop
  • ベストアンサー率75% (867/1154)
回答No.2

補足ありがとうございます。 確認したところ >一番下の画像(スケートボート・くつ・缶など)の画像 は「#container-inner」に背景画像として設定されていました。 なので、質問文に書いてある背景のCSSに加えて #container-inner{background-image:none;} を追加で記述すれば消えるはずです。 試してみてください。

fish101
質問者

お礼

ありがとうございます!! 回答は的を得ており 試したところ、即っ解決致しました 非常にすばやい回答者さまに感謝いたします ありがとうございました。

その他の回答 (1)

  • tacop
  • ベストアンサー率75% (867/1154)
回答No.1

こんにちは。 補足をお願いします。 テンプレートは何を利用していますか? テンプレート名を正確に教えて下さい。 もし自作のテンプレート(カスタムテーマ)であれば、質問に書いた以外にCSSを利用していないかどうか、 利用しているとすればどんな内容かを教えて下さい。

fish101
質問者

補足

ありがとうございます。 テンプレートはココログオリジナル・テーマ のスケーターです ミックスドメディアレイアウトのカレンダーでございます。 一番下の画像(スケートボート・くつ・缶など)の画像が消せなくて困っておりました。 それ以外のCSSは #container { background-image:url(http://画像); background-repeat: no-repeat; background-position: 100% 76% } #banner { background-image:url(http://画像); background-repeat: no-repeat; background-position: center top; } #banner h2 { font-family : Verdana,"MS UI Gothic" ,"MS Pゴシック",sans-serif; /*文字の種類*/ font-size : 14pt; /*文字の大きさを指定*/ font-weight : bold; /*文字の太さを指定*/ font-style : italic; /*斜体*/ color : #FFFFFF; /*文字の色を指定*/ } #banner h1 a { font-family : Verdana,"MS UI Gothic" ,"MS Pゴシック",sans-serif; /*文字の種類*/ font-size : 20pt; /*文字の大きさを指定*/ font-weight : bold; /*文字の太さを指定*/ font-style : italic; /*斜体*/ color : #FFFFFF; /*文字の色を指定*/ } の以上でございます。

関連するQ&A

  • 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
  • CSSの表示の違い(IEとFirefox)

    背景を固定するために、CSSを使いました。 IEで見ると、指定したとおり右下で固定されているのですが、Firefoxで見ると、全体に表示されて固定されません。 ネット上を探して見ると、Firefoxでも固定されているサイトはかなりあります。 そうすればいいのでしょうか? <style type="text/css"> <!--body {background-color:"white"; background-image:url("http://www.******-labo.com/sozai_mami/clip_arts/moon/05/white/blue.jpg"); background-repeat:"no-repeat"; background-position:"bottom right"; background-attachment:"fixed";}--> </style>

    • ベストアンサー
    • CSS
  • サイドバーの背景画像(CSS)

    以下のCSSのソースなのですがサイドバーに http://www.01kaisha.com/img/main/main01_r2_c3.jpg を背景として使いたいのですがメインのほうに背景がいってしまい サイドバーで表示する事が出来ません。 どのようにすればサイドバーにhttp://www.01kaisha.com/img/main/main01_r2_c3.jpg を使用することが出来るのでしょうか? どなたか分かる方いらっしゃいましたら教えてください、お願いします<(_ _)> body{ margin: 0px; padding: 0px; background-image: url(http://www.01kaisha.com/img/main/main01_r2_c3.jpg); background-repeat: repeat-y; } .main{ width: 642px; position: absolute; left: 0px; } .side{ margin-left: 642px; }

    • ベストアンサー
    • HTML
  • IEのみでCSSのbottomが効かない。

    IEのみ、CSSのbottomが効かない現象に悩まされております... こちらを改善する方法をご存知の方は、ご教授いただけますと大変に助かります。。 以下がCSSに記述しているプラグラム内容となります。 body{ position: relative; background-image: url(../image/bg/t_bluestick.jpg), url(../image/pattern/navi_pt.png), url(../image/gnavi/bg.png), url(../image/gnavi/bg_pt.png), url(../image/header/header_img3.png), url(../image/pattern/footer_white_pt.png), url(../image/footer/footer_pt.png), url(../image/pattern/dec_pt_50.png), url(../image/bg/pt_whitetile.png) ; background-repeat: repeat-x, repeat-x, no-repeat, repeat-x, no-repeat, repeat-x, repeat-x, repeat-y, repeat ; background-position: top, center 321px, center 321px, center 311px, center 23px, bottom, bottom, center 10px, center ; background-color: #BFE5FF ; } 何卒よろしくお願い申し上げます。

    • ベストアンサー
    • CSS
  • 上部と下部に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
  • CSSでドロップシャドウ

    CSS で写真の周りにふちと影を付けたいのですが Firefox1.5 だとうまくいくのですが、 IE6 だと padding: 4px; が反映されず、ふちの無い写真になってしまいます。どなたかコツを教えていただけないでしょうか? --HTML-- <div class="img-shadow"> <img src="./1.jpg" alt="" width="200" height="150" /> </div> --CSS-- .img-shadow { float:left; background: url(shadowAlpha.png) no-repeat bottom right !important; background: url(shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; } .img-shadow img { display: block; position: relative; background-color: #ffffff; border: 1px solid #999999; margin: -6px 6px 6px -6px; padding: 4px; ←ここが怪しい }

  • ソースの編集について

    ↓<head>と</head>の間に入れます。  <style media="screen" type="text/css"><!--  body { background: white url    (haikei_kotei01.jpg) no-repeat fixed right bottom }  --></style>  っと、あるのですが、<head>と</head>の間がどこか、分かりません。ソースの編集はメッセージの作成からソースの編集を見ることしか知りません。どうか教えてください。意味が分かっていただけたらいいんですが・・・・

  • 上下にイメージをリピートさせたい

    よく見ますが、下記サイトの様にtopとbottom(ヘッダーとフッター)にbackground-imageを無限にループするイメージ(カラー) ってcssでどう指定したら出来るのでしょうか。 左右にスペースが出来てしまったりで上手くいきません。 http://www.deviantart.com/ http://www.good.is/ http://www.postbox-inc.com/ ----------------html--------------------- <body> <div id="container">      ・      ・      ・    </div> <div id="footer> </div> </body> ------------------css---------------------- body { background-image: url(img/bg1.gif); background-repeat: repeat-x; } div#footer { background-image: url(img/bg2.gif); background-repeat: repeat-x; } ではだめですよね・・・ なるべくシンプルなソースがいいのですが、 お助けください。

    • 締切済み
    • CSS
  • html/css について質問です。

    現在、htmlとcssを勉強しながら、トップページのコーディングしています。 以下の処理を行っています。 〇一番上に[幅136px高さ34px]のヘッダ画像を横方向にリピートして、background-attachmentはscrollで固定。上や左や右は余白なしにしたい。 〇一番下に[幅168px高さ42px]のフッダ画像を横方向にリピートして、background-attachmentはfixedでブラウザの下部分に常についてくるようにしたい。 〇javaScriptでランダムにトップの画像を表示している。 しかし、3点問題があります。 ●一番上の画像について、background-position: left bottom;にしても、ブラウザ等で確認してみると、 上や左に5px程度の余白(後ろの背景画像が隙間から見えている)ができてしまいます。 marginやpaddingを追加して0にしても、余白は埋まりません。余白を埋めてブラウザの上や左を埋めるにはどうすればよいでしょうか? ●フッダの画像が、下にいけば消えてしまいます。CSSでheight: 42px;という設定をしているのですが、 この範囲がブラウザを大きくすると消えて見えなくなります。 だからといって、heightを設定しないと全くフッダ画像が表示されなくなります。消えずに常に表示されるようにするにはどうすればよいでしょうか? ●またjavascriptで背景画像を表示させているにも関わらず、フッダ画像やヘッダ画像を背景画像のような記述でコーディングしてしまっています。これは普通の画像を右方向へリピートさせる方法がわからなかったため、background-repeat: repeat-x;というコードを書いてしまっています。このようなコーディングはやはり適当ではないでしょうか? どなたかご指導お願いします。 [html] <body> <SCRIPT language="JavaScript"> bgc = new Array(); bgc[0] = "url(../image/bg1.jpg)"; bgc[1] = "url(../image/bg2.jpg)"; bgc[2] = "url(../image/bg3.jpg)"; bgc[3] = "url(../image/bg4.jpg)"; bgc[4] = "url(../image/bg5.jpg)"; n = Math.floor(Math.random()*bgc.length); document.body.style.backgroundImage = bgc[n] </SCRIPT> <div id="container"> <div id="top_header"></div> <div id="top_footer"></div> </div> </body> [css] #container{ width:100%; height:100%; } #top_header{ background-image: url(../image/top_header.gif); height: 34px; background-position: left top; background-repeat: repeat-x; background-attachment: scroll; z-index: 1; } #top_footer{ background-image: url(../image/top_footer.gif); height: 42px; bottom: 0; background-position: left bottom; background-repeat: repeat-x; background-attachment:fixed; z-index: 2; }

    • ベストアンサー
    • CSS
  • アメブロの、cssで編集がうまくできず困っています

    アメブロをやっています。ブログに背景をいれたくてcssをいじってるのですが、設定してプレビューしても、移しだされず、 「リクエストは既に処理中であるか無効です」と、表示されます。 設定は、画像アップ→画像を右クリック→ショートカットのコピーからURLをコピー→css編集画面の、ページ背景に画像を入れる、 ()の間にコピーして、 改行してから、 background-repeat:no-repeat; background-position:rightbottom; background-attachment:fixed; を入力しました。 どうして設定できないのでしょうか? どなたかご返答いただけるとたすかります!