皆さん、おはようございます、残暑いかがお過ごしですか？
お盆は店舗が休みなので、自分が買った盆栽に水をやりに行こうかと思います。
手がかかる子は、「可愛い」とかいいますが、今回はちょっと大変ですかね。
さて、初めてのhtml5 css3では背景画像の表示サイズを設定することができます。
比較的新しいブラウザであれば問題なくみれるでしょう、
ベンダープレフィックスは必要ないようです。
背景画像の表示サイズの変更する
- background-size
がプロパティになります、
値は
- 単位つきの実数
- パーセント
- auto 元のサイズでになります
- cover 縦横の比率を守ったまま画像ひとつで表示領域全体を覆うサイズにします
- contain 上記と同じで背景画像全体が表示できるサイズにします
それではデモってみます
<div style=”width: 300px; height: 300px; background-image:url(http://aliceplanblog.com/wp-content/uploads/2014/08/10557342_556767701112632_8596096265898603894_n.jpg); background-position: center; background-repeat: no-repeat; background-size: contain;”></div>
できてますか？わかりにくいので、周りにボーダーいれてみます。
追加タグは border: medium solid rgba(200,0,0,0.4);
で見てみますね。
どうですか？できてます？
300pxで画像サイズはかなり大きいですが、縦横比が揃って、表示されています。
じゃあ、次はcoverでやってみます。
タグは background-size: cover; でやってみます。
どうですか？
つまり、全体に出したい場合はこういうふうにしてあげると、どんなものにしても、背景をカバーします、
containの場合はどっちかというと、pngでレスポンシブでするのが効果的かもです
coverは全体を覆うので、シャレオツなHPにいいかもですね！！
次回は複数の背景画像を入れる場合です。
お楽しみに！！
コメントおまちしていますね～～～ヽ(*´∀｀)ノ
