- ベストアンサー
ホームページ作成時の背景設定の悩み
ホームページを作成しているのですが、スクロールさせていくと、背景が何度もでて... ホームページを作成しているのですが、スクロールさせていくと、背景が何度もでてきてしまうため、困っています。 グラデーションの背景のため、下にスライドさせていくと切れ目がでてしまいます。 ですので、できたら背景が固定されると非常にうれしいのですが、どうやったらいいでしょう？ styleは body{ padding:0 0 0 0; margin:0 0 0 0; background : url(./images/bg.jpg) left top; font-family:sans-serif monospace; font-size:14px; color:#333333; text-align:center; となっており、imagesのフォルダにbgがある状態です。 アドバイスお願いします。 }
- zoo25484
- お礼率14% (1/7)
- その他([技術者向] コンピューター)
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
・ 背景の繰り返しをとめるのは、 background-repeat: no-repeat; ・ 背景の水平方向の繰り返しをとめるのは、 background-repeat: repeat-y; ・ 背景のスクロールをとめ、固定するのは、 background-attachmemt: fixed; です。これらを試してみてください。
その他の回答 (1)
- nsjp
- ベストアンサー率29% (7/24)
background-attachment : fixed ; を追加してください。 結構基本的な部類に入るので、もう一度CSSについて勉強したほうがいいかもです。
関連するQ&A
- ホームページの背景画像が途切れてしまう。
こんにちは。 現在、ホームページを作っているのですが、背景画像で困ってしまって質問しました。 ホームページはhtmlとCSSを使って、ホームページビルダーで作っています。 bodyに背景画像１を設定しています。 ホームページの内容は <div></div>の中にinnerというclassを作って スタイルシートで40ｐｘ×40ｐｘの背景画像２を「repeat」指定しています。 この背景画像２が、IEでは表示されているのですが、firefoxやchromeだと下のほうで 途切れてしまいます。 それも、ちゃんと表示できてるページと、途切れてしまうページの２種類があります。 原因を自分でも探してみたのですが、見つかりませんでした。 もし、知っている、気付いた方がいらっしゃったら教えていただけませんか？？ よろしくお願いします。 ちなみに、下記はスタイルシートに記載しているものです。 --------------------------------------------------------------------- body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(mokuteki/taiiku/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-image : url(images/bg_white.png); background-repeat : repeat; } -----------------------------------------------------------------
- ベストアンサー
- デザイナー・クリエイティブ職
- CSSでの影の付け方
http://radiocaroline.jp/ 上記のサイトのようにコンテンツ表示領域と 背景領域の間のグラデーション部分はどのように 設定すればいいのでしょうか？ 現在真ん中780px固定で左右を背景画像にしてます。 <style type="text/css"> <!-- body { background: #000000; margin: 0px; padding: 0px; text-align: center; color: #ffffff; background-color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-image: url(images/bg.gif); background-repeat: repeat; } .oneColFixCtrHdr #container { width: 780px; background: #000000; margin: 0px auto; text-align: left; } .oneColFixCtrHdr #header { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #header h1 { margin: 0px; padding: 0px 0px; } .oneColFixCtrHdr #mainContent { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer p { margin: 0px; padding: 5px 0px; } #left { background-color:#000000; width:530px; float:left; } #right { background-color:#000000; width:250px; float:left; } .style2 { color: #FFFFFF; font-size: 80%; } .style1 {font-size: 60%; color: #CCCCCC; } .style6 {color: #CCCCCC} .style7 {font-size: 70%} --> </style>
- 締切済み
- ホームページ作成ソフト
- 背景色を変更した所、文字が背景色と被って見づらく
引き続き質問です。元からあった無料cssテンプレートは背景が黒く、 暗いイメージを持たれると困るとのことで白色の背景に変更しました。 すると、ホームページに記載されている文字が白色の為何が書いて あるか見えなくなってしまいました。 現在は全てのサイト上の文字に<font color="black">何でも</font> というタグを付けて応急措置を考えておりますが、元から文字の色を 全て黒色に指定することはできないものでしょうか。 HPは全くの素人で、どの部位を変更すると良いかご指南いただければ幸いです。 @charset "UTF-8"; /* --------------------- * FONTSIZE MODEL * * --------------------- * 63% -> 10pxに相当 * 70% -> 11pxに相当 * 75% -> 12pxに相当 * 82% -> 13pxに相当 * 88% -> 14pxに相当 * 94% -> 15pxに相当 * 100% -> 16pxに相当 * 107% -> 17pxに相当 * 113% -> 18pxに相当 * 119% -> 19pxに相当 * 125% -> 20pxに相当 * --------------------- */ /* ========BASIC======== */ html { overflow-y:scroll; } body { margin:0; padding:0; line-height:1.6; letter-spacing:1px; font-family:Verdana, Helvetica, sans-serif; font-size:13px; color:#fff; background:#FFF; } br { letter-spacing:normal; } a { color:#d1d1d1; text-decoration:none; } a:hover { color:#666; } img { border:0; vertical-align:bottom; } h1,h2,h3,h4,h5,h6 { margin:0; } /* ========TEMPLATE LAYOUT======== */ #top { width:780px; margin:0 auto; } #contents { float:left; width:780px; } #side { float:left; width:220px; background:#181818; padding:10px 0; } #main { float:right; width:540px; padding:10px 0; } #footer { width:540px; margin-left:240px; } /* ========SIDE CUSTOMIZE======== */ #side h1 { margin:0; font-size:24px; } #side h1 a { color:#fff; } #side h1 a:hover { color:#ddd; } #side div.section { margin:0 10px; } /* ========MENU CUSTOMIZE======== */ #menu ul { margin:0 auto; padding:10px 0; } #menu li { color:#333; text-align:center; list-style-type:none; } #menu li a { display:block; width:220px; color:#f1f1f1; line-height:60px; } #menu li a:hover { color:#f1f1f1; background:#2d2d2d url("../images/bg_menu.gif") 0 0 repeat; } /* ========MAIN CONTENTS CUSTOMIZE======== */ #main #pr p { margin:0; padding:5px 0; } #main #icatch { margin-bottom:10px; } #main a { color:#d1d1d1; } #main a:hover { color:#f1f1f1; text-decoration:underline; } #main h2 { margin-bottom:8px; padding:0 0 0 10px; font-size:15px; font-weight:bold; line-height:35px; border:1px solid #3e3e3e; background:#181818; } #main h3 { clear:both; margin:20px 0 8px 0; padding:0 0 0 5px; font-size:14px; border-left:5px solid #3e3e3e; } #main h4 { margin-bottom:2px; font-size:14px; border-bottom:2px solid #f1f1f1; } #main h5 { margin-bottom:2px; padding:2px 5px; font-size:13px; background:#3e3e3e; } #main h6 { margin-bottom:2px; font-size:13px; border-bottom:2px solid #3e3e3e; } #main p { margin:0 0 1em 0; } #main dt { margin-bottom:3px; } #main dd { padding:0; margin:0 0 0.5em 1em; padding:3px; color:#ddd; background:#181818; } /* INFORMATION CUSTOMIZE */ * html body #main dl.information dd div { display:inline-block; } #main dl.information dt { float:left; width:10em; margin:0; padding:0; color:#fff; } #main dl.information dd { margin:0 0 0.5em 10em; padding:0; color:#fff; background:transparent; } #main table { width:100%; border-collapse: collapse; } #main table th { padding:5px; font-size:12px; text-align:left; border:1px solid #ddd; background:#181818; } #main table td { padding:5px; font-size:12px; text-align:left; border:1px solid #ddd; } /* ========PAGETOP CUSTOMIZE========= */ #pageTop { padding:10px 0; text-align:right; font-size:11px; } #pageTop a{ padding:0 0 0 12px; background:url("../images/bg_pagetop.gif") 0 60% no-repeat; } /* ========FOOTMENU CUSTOMIZE======== */ #footMenu ul { margin:0; padding:10px 0 0 0; text-align:right; border-top:1px solid #b4b4b4; } #footMenu li { display:inline; margin:0 0 0 10px; list-style:none; } よろしくお願いします。
- ベストアンサー
- HTML
- コンテンツにあわせて伸縮する背景 CSS
http://www.fisco.co.jp/index.html 上記のサイトのように、ヘッダーのリンクボタンの横の左右に伸びるラインと、 フッターの左右に伸びるラインのような背景にしたいと思っています。 その時上記サイトは背景が白ですが、私は上から下にかけてグラデーションにしたいと考えています。 最初縦長で上から下のグラデーション画像を用意し、X方向にリピートしてみたのですが、 コンテンツの長さによっては文字や画像と重なってしまったり、 またはものすごく余白があいてしまったりしています。 CSSは以下のように設定したのですがうまくいきません。 body { background:url(../img/bg.jpg) repeat-x center top; line-height:1.4; color:#333; font-family:Arial, sans-serif; font-size:0.7em; margin: 0; padding: 0; height:100%; } このような場合、コンテンツの長さがページごとに変わっても、 上下にコンテンツを挟む形でラインが表示される方法を教えてください。 説明がうまくできず申し訳ないのですが、よろしくお願いいたします。
- ベストアンサー
- HTML
- 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
- CSS背景画像の設定・・・
質問です。 http://blog.livedoor.jp/uehara_nami/ このサイトなのですが、ウインドウの幅を縮めても背景画像も一緒に縮まり？ます。 これはどのようにCSSを指定しているのでしょうか？ ソースを見てみると background:url('http://music.livedoor.com/img/feature/ueharanami/bg.gif') repeat-y scroll 50% 0; margin:0; padding:0; text-align:center; とはあるのですが、同じように指定してもできないのです。
- ベストアンサー
- ブログ
- 掲示板の背景が更新すると無くなってしまいます
今自分の掲示板を持っているのですが、 掲示板に新しい背景を素材として入れたところ、 カスタマイズの際の更新では上手く表示されたのですが、 ページに戻って更新した際に 画像がなくなってしまいます・・。 どこが問題なのでしょうか・・？ 全く分からないのでよかったら教えてください・・。 背景画像（紫の険の画像urlはhttp://b-cures.net/material/bg/moonsword/bg_moonsword_pur.jpgです） </div> </body> </html> <NOTITLE> <html> <head> <style type="text/css"> <!-- body{ background-color:#FFF; } ul{ } a:link { color:#003366; } a:visited { color:#003366; } a:hover { color:#3399CC;} DL{ font-size:14px; color:#000; } DT{ font-size:14px; color:#000; margin:5px 5px 0; } DD{ font-size:14px; color:#000; margin:5px 0 15px 20px; } H1{ font-size:21px;color:#3399CC; padding:25px 5px 10px; } H2{ font-size:14px;color:#FF9900; padding:3px 5px;margin:0; background-image:url(http://b-cures.net/material/bg/moonsword/bg_moonsword_pur.jpg); background-repeat:repeat-y; background-color:#FFFFDD; border:1px solid #777777; } H3{ font-size:14px;color:#FF9900; padding:3px;margin:0; background-color:#FFF; border:1px solid #777777; } HR.ad { width:100%; height:1px; background:#3091C1; text-align:center; border-width:0px; margin-left:0px; color:#3091C1; } --> </style> </head> <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" style="background-image:url(http://b-cures.net/material/bg/moonsword/bg_moonsword_pur.jpg）background-repeat:repeat-y;width:100%;margin:0;padding:0;"> <div style="background-image:url(http://b-cures.net/material/bg/moonsword/bg_moonsword_pur.jpg);background-repeat;width:100%;height:auto;" align="right">
- ベストアンサー
- その他([技術者向] コンピューター)
- ブログのTOP画像表示方法（悩んでます）
どこをどう変えればTOPに画像をつけるコトが出来るのでしょうか？？ ホントに悩んでます。 検索してもよくわからなくて・・・ body { font-family: Arial, Helvetica, sans-serif; background-color:#ffffff; background-image:url(http://269g.jp/img/bg/nail_style_1/bg.gif); background-repeat:repeat-y; margin:0px; padding:0px; text-align:center; } #container{ text-align:right; margin:0px auto 0px auto; width:906px; height:596px; background-image:url(http://269g.jp/img/bg/nail_style_1/top.jpg); background-repeat:no-repeat; background-position:center top; background-color:#ffffff; } h1 { text-align:left; margin:0px 0px 0px 0px; padding-top:225px; font-weight:bolder; font-family:sans-serif; font-size:19px; } h1 a{ color:#58B29A; text-decoration: none; font-family:sans-serif; font-weight:bolder; } h2 { padding: 0px; font-weight:bold; font-size:14px; text-align:left; font-family:arial, Helvetica; } h3 { padding: 5px 0px 10px 3px; font-size:14px; font-weight:bolder; font-family:arial, Helvetica; } H3 a{ text-decoration: none; }
- ベストアンサー
- ブログ
- ホームページテンプレートダウンロード
ホームページのテンプレートをダウンロードしました。 内容は下記のとおりです。 しかしこのままアルファエディットに貼り付けてもイメージ通りになりません。 他にimageフォルダが付いていてgifが４つあったのですが これをどこかに貼り付けなければならないのでしょうか？ 教えてください。よろしくお願いします。 @charset "UTF-8"; /* --------------------- * FONTSIZE MODEL * * --------------------- * 63% -> 10pxに相当 * 70% -> 11pxに相当 * 75% -> 12pxに相当 * 82% -> 13pxに相当 * 88% -> 14pxに相当 * 94% -> 15pxに相当 * 100% -> 16pxに相当 * 107% -> 17pxに相当 * 113% -> 18pxに相当 * 119% -> 19pxに相当 * 125% -> 20pxに相当 * --------------------- */ /* ========BASIC======== */ * { font-family:Verdana, Helvetica, sans-serif; color:#333; } body { margin:0; padding:0; line-height:1.6; letter-spacing:1px; background:#EFEFEA; } br { letter-spacing:normal; } a { color:#333; text-decoration:none; } a:hover { color:#DF8713; text-decoration:none; } img { border:0; } h1,h2,h3,h4,h5,h6 { margin:0; } /* ========TEMPLATE LAYOUT======== */ div#top { width:778px; margin:0 auto; border-left:1px solid #ccc; border-right:1px solid #ccc; background:#fff; } div#header { width:774px; margin:0 2px; background:#4f3333; } div#menu { width:774px; margin:0 2px; background:#ccc; } div#contents { clear:both; width:774px; margin:0 2px; padding:10px 0; } div#main { float:left; width:554px; padding:0 5px; } div#sub { float:right; width:200px; padding-right:5px; } div#footer { clear:both; width:774px; margin:0 2px; } /* 回り込み解除 */ div#contents:after { content:""; display:block; height:0; clear:both; visibility:hidden; } /* ========HEADER CUSTOMIZE======== */ div#header h1 { margin:0; padding:0 10px; font-size:150%;/* 24px相当 */ color:#fff; line-height:80px; } div#header h1 a { color:#fff; } div#header h1 a:hover { color:#DF8713; } /* ========MENU CUSTOMIZE======== */ div#menu ul { margin:0; padding:0; } div#menu li { float:left; font-size:82%;/* 13px相当 */ color:#333; list-style-type:none; } div#menu li a{ display:block; margin-right:1px; padding:0 20px; color:#fff; line-height:2.5; background:#9C6565; } div#menu li a:hover{ color:#fff; background:#DF8713; } /* 回り込み解除 */ div#menu ul:after{ content:""; display:block; height:0; clear:both; visibility:hidden; } /* ========MAIN CONTENTS CUSTOMIZE======== */ div#main a { color:#DF8713; } div#main a:hover { border:0; color:#DF8713; border-bottom:1px solid #DF8713; } div#main h2 { margin-bottom:3px; padding:2px 2px 2px 5px; font-size:94%;/* 15px相当 */ font-weight:bold; border-left:5px solid #4E3333; background:url(images/bg_h2.gif); } div#main h3 { margin-bottom:2px; padding-left:25px; font-size:82%;/* 13px相当 */ background:url("images/bg_h3.gif") 0 50% no-repeat; } div#main p{ margin:0 0 1em 0; font-size:82%;/* 13px相当 */ } /* ========SUB CONTENTS CUSTOMIZE======== */ div#sub .section { margin-bottom:10px; padding:10px; background:#DEDDD0; } div#sub h2 { padding-bottom:5px; text-align:center; font-size:94%;/* 15px相当 */ font-weight:bold; color:#fff; border-bottom:1px solid #93847B; } div#sub ul { margin:0; padding:5px 0 0 10px; } div#sub li { margin:0; padding-left:12px; font-size:82%;/* 13px相当 */ background:#DEDDD0 url("images/bg_list.gif") 0 50% no-repeat; list-style:none; } /* ========TOTOP CUSTOMIZE========= */ div#totop { padding:10px; text-align:right; font-size:82%;/* 13px相当 */ } div#totop a{ padding:0 0 0 12px; background:url("images/bg_totop.gif") 0 60% no-repeat; } /* ========FOOTER CUSTOMIZE======== */ address{ padding:20px 0; text-align:center; font-style:normal; font-size:75%;/* 12px相当 */ color:#333; border-top:1px solid #ccc; }
- 締切済み
- ネットトラブル
- 背景画像
背景画像の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
お礼
大変ご丁寧にありがとうございました。解決しました。