プロが教えるわが家の防犯対策術!

背景画像の繰り返しについて
ホームページの背景画像を「repeat-x」を使用して
背景画像を繰り返しさせいるのですが、
画像と画像のつなぎ目が、うっすら見えてしまい(ボダーみたいな線)
あきらかに画像を繰り返ししているのがわかります・・・
どうしても、格好悪い背景になってしまいます。

どうしたら、画像の繰り返しがうまくいくのでしょうか?
画像と画像がつながっている部分がわからないようにするには
どうすればいいですか?

body {
background: url(images/back04.JPG);
background-repeat: repeat-x;
background-position: top left;
margin: 0;
    }

A 回答 (3件)

左右同じ色の画像を制作した場合は、線がでないですよね?


それでも線が出るのなら画像の制作方法が間違っています。
NO.1.2さんの通りキリ抜き方法が悪いか、オプションで影や線を付与していませんか?
----------------------------
そうでなければ、
画像の左右がクッキリするのは、画像の左右が違うから当たり前の話なので、
1枚板の様に綺麗に見せたい場合には、
画像処理時に、左右を反転させたり、切れ目をボカしながら1枚の画像を作ります。
■■■
このように真ん中の画像を複製し左右反転させた両端2枚の画像を合わせ
適当にボカしてからキリ抜けば、リピートしても区切りがボケます。
このように、最初に1枚作ってからではなく、
初手の制作時からやれば、この作業・手間が省けます。

ちなみに、background-position: top left; の場合は、デフォルトなので削除可能。
    • good
    • 0
この回答へのお礼

画像を修正したら、うまく出来ました!
background-position: top left; は
デフォルトなんですね・・・
詳しく説明していただき、ありがとうございます。

お礼日時:2010/05/27 08:26

先の回答者さんが、正解です。


HTMLやCSSの記載ではなく、そういう絵を使用したからそうなったのです。
画像そのものがリピートに耐えられる画像ですか?
    • good
    • 0

元々の画像が原因ではないでしょうか。

端に違う色が入っているか、それとも線が入っているとか。その点をチェックして、修正して試されたらいかがでしょう。

そのスクリプト自体は問題ないと思いますけど。
    • good
    • 0
この回答へのお礼

ご指摘の通り、画像に線が入っていて上手く出来ていませんでした。
画像を修正したところ、上手くできました。
ありがとうございました。

お礼日時:2010/05/27 08:24

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています