背景画像を拡大しようとすると段々模様になってしまいます

Question

###困っていること
CSSにて背景画像を画面いっぱいより少し大きくしたいので、background-sizeを使ってパーセント指定したところ、細かい段々模様になりました。
どうすれば段々にならず普通に画像が拡大されるのでしょうか？
###該当のコード

body{
background: url(aokuro.jpg);
background-size:140% 140%;
}

Answer 1

JPEG画像はラスター画像、つまり「このピクセルがこの色」というのを画素ごとに記録した画像です。拡大してしまえば、画素以上のデータはないので、今ある画素を使ってモザイク状に出すしかありません（waifu2xのような、「ディープラーニングを応用して、画像拡大しても自然な画像を生成する」サービスもありますが、ブラウザにそこまで求めるのは酷ですし、速度も実用的ではないでしょう）。

ということで、JPEG画像である以上、拡大したときにきれいに拡大されないのは仕方ないです。元から大きな画像を使う他ありません。

Comments

[ko20vonobird]

そうなのですね、わかりました、ありがとうございます。