- 締切済み
ホームページ作成で困っています(body)
イーウェブ様「選択した背景色(画像)に変更して保存する」（http://javascript.eweb-design.com/1306_bis.html）の方法に、 追加でこちらのページ（http://www.allinthemind.biz/markup/css/background-size.html）指定要素に背景画像が常にある形でフィット - cover -を使って背景を表示したいです。 更に追加でこちらのサイト（http://www.aichan.biz/html/css/background-position.html）の中央寄せで表示しようと思っています。 どうすればいいですか＿？
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- y_shimizu
- ベストアンサー率41% (27/65)
「どうすればいいですか？」というのはどういう意味でしょうか？ それぞれのサイトはサンプルソースもありますし、何を必要としているのですか？ やってみたけど、ここがうまくいかない、エラーが出る、とか そういうのでないと答えにくいと思います。
関連するQ&A
- ホームページ作成
背景を右下に設定する時は <style type="text/css"> <!-- body{ background-image: url(背景画像のURL); background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom; } --> </style> を<head>から</head>までに書けばいいと書いてあったので <html> <head> <meta http-equiv="content-type" content="text/html; charset=EUC-JP"> <title>無題</title> <meta name="generator" content=" 6.0.0.49"> <style type="text/css"> <!-- body{ background-image: url(背景画像のURL); background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom; } --> </style> </head> <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red"> <p style="line-height:150%;"> </p> </body> </html> と書きましたがダメでした。 どこが間違っていますか？ またどうすれば直るか教えてください。 当たり前ですが、「画像URL」のところはちゃんとアドレスに置き換えました。
- ベストアンサー
- Windows XP
- [CSS 文法]Invalid number : background Too many values or values are not recognized
私はCSSファイルを現在作成しています。 CSS2仕様書(http://www.w3.org/TR/REC-CSS2/cover.html#minitoc)を見ると 'background' Value: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit と書かれています。 今、背景色:茶色、背景画像:なし、画像繰り返し:なしをhtml要素に適用するつもりで、 ---- @charset "UTF-8"; html { background:brown none none scroll; } ------------------ と打ったところ、W3CのCSS Validatorは Invalid number : background Too many values or values are not recognized : brown none none scroll と言ってきました。私は何が間違っていたのでしょうか？
- ベストアンサー
- CSS
- スマホブラウザでの背景固定
以下のＣＳＳで背景画像を固定しようと思っています。 ＰＣでは問題なく固定されるのですが、スマホだと 背景画像が固定されず、画面をスクロールすると一緒にくっついてきます。 スマホの場合は別の対処が必要なのでしょうか？ body { margin:0 auto; text-align:center; padding:0; background: url(../images/photo01.jpg); background-repeat:no-repeat; background-position:center bottom; background-attachment:fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
- ベストアンサー
- CSS
- ホームページビルダーＶ９での背景固定について
ホームページビルダーＶ９を使っています。 そこで、背景を固定したいのですが上手くいきません。 ソースに下のようなタグを入れても画像が表示されないんです。 どうしたら良いか教えてください。 <STYLE type="text/css"> <!-- BODY { background-color: #------; background-image : url("画像のURL"); background-attachment: fixed; background-position: 50% 50%; background-repeat: no-repeat; } --> </STYLE>
- 締切済み
- ホームページ作成ソフト
- CSSでBody要素への背景画像（san.jpg）の配置を以下の設定で
CSSでBody要素への背景画像（san.jpg）の配置を以下の設定でしてみました。 Dreamweavercs4でのデザインモードとIE7のプレビューでは 画面中央に配置されて見えますが、safariとfireFox3.6.2では添付画像のように 画面上部に画像の下半分だけが表示されます。 これはどうしてなのでしょう？ それとFirefoxでも上下左右中央に表示されるようにするには どうしたらよいのでしょう？ ご存知の方がおられましたら、ご教示ください。 ※ディスプレイ解像度1280×1024 背景画像サイズ592px × 568px ～～～～～～～～～～～～～～～～～～～～～ body { background-image: url(sun.jpg); background-repeat: no-repeat; background-position: center center; } ～～～～～～～～～～～～～～～～～～～～～
- ベストアンサー
- HTML
- imgタグのみで画像を中央に重ねる方法
HTML5+CSS3で画像を中央にフィットした状態で重ねる方法を調べています。 一般的にはbackground-size:contain;で背景を適用したDIV要素にimg要素を挿入しますが、この場合だと一部のブラウザでは背景が印刷されないことがあります。 そのため、background-imageを使わずにこれと同じ方法を実現したいのですが、何かいい方法はありますでしょうか。
- 締切済み
- CSS
- スクロールに沿ってjavascriptで背景画像を
現在webサイトを作成しています。ページのメインビジュアルを「.mainVisual」というclassを作成し背景画像を指定して表示しています。 この背景画像を画面スクロールした際に、下に動くように以下のjavascriptを実装しています。 $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('.mainVisual').css('background-position-y', '0 ' + parseInt( +y / 10 ) + 'px'); }); }); この状態で動くのですが、今回新たに背景画像の元々の表示位置を「background-position」で調整したいと考えています。（単純に画像が下に下がるので、事前に画像の位置を上に上げておきたい） cssの記載で位置の調整はできるのですが、スクロールしてjavascriptが実装されると「background-position」の値が0pxになってしまい、背景画像の指定位置が元に戻ってしまいます。 こちら既に指定指定した「background-position」の値を残しつつ、jsでスクロールに併せて要素を動かすにはどのようにすればよいでしょうか。 わかりにく説明と、ひどく初心者の質問で大変に恐縮ですが、どなたかご教授いただけませんでしょうか。 よろしくお願いいたします。
- 締切済み
- JavaScript
- 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
- ホームページに画像を貼りたい
テキストエディットでHTMLを書き込んでホームページ作成をしている初心者です☆ 背景に画像を貼りたくてもどうやっても貼れなくて悩んでいます。 使っているパソコンはmacで、写真はFinderの中にあるマイファイルのイメージのoriginal.jpgを使いたいのです。 そこで、HTMLの方は body{background-image:url(マイファイル/イメージ/original.jpg); background-repeats:no-repeat; background-position:center;} と書き込みました。 CSSの方は、 body{ background-image:url(マイファイル/イメージ/original.jpg); background-repeats:no-repeat; background-position:center;} と書き込みましたが、ブラウザで見たところ写真が表示されなくて困っています。 本当に初心者で困っています。 できれば正しい写真の貼り方を教えていただきたいのですが、お願いします。
- 締切済み
- その他（インターネット・Webサービス）
- HPビルダー7でアップしたが左寄りに表示される
たくさんググりましたが分からないので質問させてください。 HPビルダー7でFC2にサイトをアップロードしたんですが、 背景画像、コンテンツなどすべてが左よりに表示されてしまいます。 背景画像だけでも中央にと思い、以下のように、 background-position : center;のみを追加しました。 BODY{ background-repeat : no-repeat; background-position : center; } div{ width:800px; / margin-right: auto; margin-left: auto; } するとやはり、背景画像だけが中央にあり、 画像やテキストは左よりです。 画像やテキストによってはあえて中央に置きたくないのもありますので、 コンテンツ全体（もちろん背景画像も）を中央にするにはどうしたらいいでしょか？ ＨＴＭＬ、ＣＳＳはある程度理解できます。 回答をよろしくお願いします。 使用アプリなど： ホームページビルダー７ Google Chrome Vista
- ベストアンサー
- ホームページ作成ソフト
補足
すみません、訂正です。「どうすればいいですか＿？」の部分を読まないで下さい