おしえて

背景の左右端に画像を表示する方法

締切済

質問者：amanmo
質問日時：2016/08/03 22:46
回答数：4件

html初心者です。
基礎的な質問ですみません。

背景の両端に同じ画像を表示したいのですが、
下記で試したところ右側のみ表示されます。
過去の質問も参考にしましたが、うまくいきません。
どうすればいいでしょうか。

<head>
<style type="text/css">
</style>
</head>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： t_fumiaki
回答日時：2016/08/05 10:20

「#bodyの高さを％指定しているから」、が原因。

高さはコンテンツによって決まってしまうから%では0と同じ意味。
pxで指定するか、レスポンシブのやり方にする。

下はレスポンシブでのやり方の例
#body{
background:url("●●.jpg") repeat-y fixed;
background-size:auto; ←追加
padding-bottom:50%;←重要追加：値は調整する。
overflow:auto;
width:100%;
height:0;　←必ず0にする。

- 0
- 件

通報する

No.3

回答者： t_fumiaki
回答日時：2016/08/05 07:48

#bodyってのは、div区画の背景なんでしょうに！

<div id="body>・・・・</div>
この区画内にコンテンツが無ければ、区画の背景は表示されないヨ。

以下の様にこのdiv内にコンテンツ記述は有るの？無ければ無理。
<body>
<div id="body">
<p>・・・・・<p>
・
<img・・・・・/>
・
</div>

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2016/08/04 10:43

詳しい状況が分からないのですが、

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;}

とか・・

- 0
- 件

通報する

No.1

回答者： naokita
回答日時：2016/08/04 00:03

<body>

<div id="body">

上記のように
<body>の次に
<div id="body">がちゃんとあるのかな？？
これが第一の問題。
それがあるのに、表示されないのなら、コンテンツの裏に隠れて見えないだけなので、
#body{
～～～
にある
width:100%;は不要だから・・・
これを削除してから、
padding-left:60px;
とか左側を（数値を適当に変更して）開けてやれば良い。