html初心者です。
基礎的な質問ですみません。
背景の両端に同じ画像を表示したいのですが、
下記で試したところ右側のみ表示されます。
過去の質問も参考にしましたが、うまくいきません。
どうすればいいでしょうか。
<head>
<style type="text/css">
<!--
body{
background:url("●●.jpg") #000000 100% repeat-y;
margin:0px;
padding:0px;
overflow:hidden;
color:#fff;
width:100%;
height:100%;
}
#body{
background:url("●●.jpg") repeat-y fixed;
overflow:auto;
width:100%;
height:100%;
}
--></style>
</head>
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
「#bodyの高さを%指定しているから」、が原因。
高さはコンテンツによって決まってしまうから%では0と同じ意味。
pxで指定するか、レスポンシブのやり方にする。
下はレスポンシブでのやり方の例
#body{
background:url("●●.jpg") repeat-y fixed;
background-size:auto; ←追加
padding-bottom:50%;←重要追加:値は調整する。
overflow:auto;
width:100%;
height:0; ←必ず0にする。
No.3
- 回答日時:
#bodyってのは、div区画の背景なんでしょうに!
<div id="body>・・・・</div>
この区画内にコンテンツが無ければ、区画の背景は表示されないヨ。
以下の様にこのdiv内にコンテンツ記述は有るの?無ければ無理。
<body>
<div id="body">
<p>・・・・・<p>
・
<img・・・・・/>
・
</div>
No.2
- 回答日時:
詳しい状況が分からないのですが、
html{height:100%;}
body{
background:url("./images/background/sky.jpg") black repeat-y;
background-size:cover;
margin:0px;
padding:0px;
overflow:hidden;
color:#fff;
width:100%;
height:100%;
position:relative;
}
body:before,body:after{
content:"";
display:block;
height:100%;
width:20%;
position:absolute;
top:0;
background:url(./images/background/Green.jpg) ;
}
body:before{left:0}
body:after{right:0;}
とか・・
No.1
- 回答日時:
<body>
<div id="body">
上記のように
<body>の次に
<div id="body">がちゃんとあるのかな??
これが第一の問題。
それがあるのに、表示されないのなら、コンテンツの裏に隠れて見えないだけなので、
#body{
~~~
にある
width:100%;は不要だから・・・
これを削除してから、
padding-left:60px;
とか左側を(数値を適当に変更して)開けてやれば良い。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS のみのタブ切り替えについて
-
スクロール可能なチェックボックス
-
divのheight指定で画面一杯に表...
-
【CSS】floatで左右に並べた...
-
Ctrl+F(検索)の窓を出したいの...
-
スタイルシートで画面を上下に...
-
CSS <div>の入れ子が反映さ...
-
HTMLですCSSです この画像のよ...
-
MAX関数を使ってからLEFT JOIN...
-
jQueryで同じクラス名のものを...
-
createElementで作成した要素を...
-
jQueryでのドラッグアンドドロ...
-
[急ぎ] videoタグで埋め込んだm...
-
jqueryで要素の中身を要素の外...
-
jspでcssが読み込めない
-
eclipseでcssを使うためには?
-
htmlの記述で link rel=styles...
-
アコーディオン自動開閉メニュ...
-
SimplyScrollについて
-
JQuery UIで、表示したタブの中...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Ctrl+F(検索)の窓を出したいの...
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
HTMLですCSSです この画像のよ...
-
css固定したフッターが本文と重...
-
CSS <div>の入れ子が反映さ...
-
スクロール可能なチェックボックス
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
チェックボックスの背景色って...
-
文字を固定したいのですが…
-
スタイルシートで画面を上下に...
-
フッターの下に隙間ができてしまう
-
文字をクリックしたら別の文字...
-
CSSでdivのheightを動的に
-
大分類・中分類・小分類
-
HTMLですCSSです 画像のように...
-
リキッドデザイン3カラム左端幅...
-
htmlのstyleのposition:relativ...
-
★★★フッター最下部固定/スクロ...
おすすめ情報