背景画像を配置する際に使うcoverとcontain

/ 0 Comments / , / , /

coverとcontainの違い

時々どっちがどっちか解らなくなるので、栞がわりにメモを残しておきたいと思います。

サイト製作では背景画像を変えるだけで、かなり印象が変わるということを私はよく忘れて、ガラッと雰囲気を変えたくなる事があります。

部屋の模様替えのように。。

それを避けるためには、慎重に背景画像を選び、これだけ悩んで決めたんだから、長く使おう！！と思うくらい悩むことも大切かと思います♭

どうしても変えたくなった場合は、気持ちを尊重することも大切ですが…。

本題の
background-size: cover;
background-size: contain;
違いについての理解ですが、

containは画面のサイズに関係なく、常に背景画像の全体が表示される

coverは画面のサイズに合わせて画像が表示される

これは、それぞれX軸とY軸を基本にした考え方であり、web制作においても潜在的に皆さんお使いだと思います。

文字の大きさ指定もそうですが、全体のバランスを考えて書きますよね。

PXで指定する場合は、そこまで細かく全体のバランスを意識しませんが、％で指定する場合は全体のバランスを考えて、計算した数値を指定する必要があるのです。

＊サンプルソース＊ベンダープレフィックス対応

body {
    background: #f9f9f9 url(../img/bg-1.jpg);
 　　　-webkit-background-size: cover;
    　-moz-background-size: cover;
    　-o-background-size: cover;
    　background-size:　cover;
    }

参考：https://www.yuu-diaryblog.com/2016/09/13/css-background-size/

この時、「画像のどの部分が見えやすいように持ってくるのか？」
「どうすればきれいに見えるのか？」も考えながら配置したいです。

その場合は background-position を使います。

設定方法は

background-position: right;
 background-position: bottom;
 background-position: center;
 background-position: top;

プラス、 　px　em　%　による設定方法があります。

%で指定する場合も、rightやbottomで指定する場合も、まずは基点がどこになるのかを考えて配置します。

参考：https://dotinstall.com/lessons/basic_css_layout/35710 

背景画像を使わない場合

背景画像を使わず、シンプルなデザインにする場合はカラーだけでも
十分綺麗なWebサイトになりますよね。

その場合は div要素を作り、クラス、IDを決めていき、画像も細かく配置決めをしながら、設定していきます。その時、最もよく使うのがmarginとpaddingでした。

左に寄せたり右に寄せる大きなdiv要素の配置は、floatやclearfixを理解してからでないと、設計できません。。

floatの概念は、文章を読むだけでは理解に苦しむので、動画をググって見つけると身につけられます。

私のおすすめ :
ドットインストール

一から解説してくれていて、とても参考になります。

頭が混乱してきたら、理解を深めるとスッキリしてきて、仕事の効率もアップします。

ぜひお試しを！

【PR】
更新しました！

People Meet Art

Adminartist 解説PDF