画像を左右に表示させる方法

質問

いつもお世話になっております。

ある画像を、

body{background:url(xxx.gif) repeat-y #ffffff;
}

とcssで指定し左側に表示させました。

この画像を反転させて右側にも表示させたいのですが、
body要素に2つbackgroundを挿入すると、
当然後に指定した画像しか表示させません。

何か良い方法があればご教授下さい。

回答No.4

noname#83877 · ベストアンサー

留意点として、例えば幅800pxの画像を背景画像として使う場合、ウインドウサイズが小さくなると当然見えなくなります。
backgroundプロパティを調べてみてください。確かbackground-positionは基本0px 0pxの指定のはずです。
なので左寄せの場合は指定が必要ありません。
右寄せの場合はright、100%等の指定が必要になります。

それらを踏まえた上で、背景画像を左と右で1ずつ用意し、divに右寄せ、bodyに左寄せの背景画像としてそれぞれ指定してみてはという意味でした。（おそらく試された時はbackground-positionを指定しなかったのではないでしょうか？画像がかぶってしまったのではないかと思います。）
この場合ウインドウサイズが変わってもちゃんと背景画像がついてくると思います。

お礼

ありがとうございました！
なんとか解決致しました。

実はmatametamuさんの仰るように、
しっかりとposition指定もしていたのですが、
どうソースをいじっても片方の画像が消えてしまって・・

それでなんとなくbodyに指定していた
margin:0;とpadding:0;を外したところ
画面全体が若干右下にずれ込み、
そのずれた隙間から表示されていないと思っていた画像が
顔を見せました。

それで最初からhtmlとcssのソースを一からコピペを駆使しつつ
構築しなおしたところ、
はっきりとした理由は分かりませんが、
とりあえず左右に表示することができました。

とにかく良かったです。
ありがとうございました。

回答No.3

fujillin

ペイントでも反転図形の合成くらいなら簡単にできますよ。

1）ペイントで目的のフィアルを開く
2）全体を選択（ｃｔｒｌ+A）で、コピー
3）「変形」-「キャンパスのサイズ」で幅を2倍にする
　　（→2倍のサイズになり、右半分が白くなる）
4）「変形」-「反転」で反転画像を作成
　　（→左半分が白で、右側に反転画像ができる）
5）ぺースト
　（→2でコピーした元の図形が左半分にペーストされる）
6）「名前をつけて保存」で、できあがり!！

お礼

詳細な説明ありがとうございます。

言われたとおりやってみたら、
確かにできました！

そしてしっかりと画面にも反映されました！、が
ここからが問題で

お気に入りを画面左に表示させると、
反転させて作った右側の画像だけ消滅します・・・

どうしましょうかね

回答No.2

noname#83877

もしも画像が透明色を使っているgifならhtmlに指定すればいけるんじゃないでしょうか。
古いブラウザは切り捨てることになりますが。
もしくはbody直下にdiv要素を置いてそれに指定するとか。

お礼

ご回答ありがとうございます。

gifなので試しにdivやhtmlに指定してみたのですが、
やはり後に指定した画像しか表示されません。

htmlのバージョンに問題があるのでしょうか。
ちなみに今はXHTML1.0 transitionalで作っています。

回答No.1

lesstia

その画像とそれを反転させた画像を横に並べた画像を作り、それを指定してはいかがでしょうか。

補足

ご回答ありがとうございます。

やはりそのやり方ですか。
私もそれしかないと思い、作成しようと思ったのですが、
いかんせんその画像の作り方が分からない・・・orz

ペイントで作ろうとしたのですが、
見事に失敗しました。

画像は基本的に縮小やカットくらいしかしないので、
加工の知識はほぼゼロです。

うーん、どうしよう・・