おかげさま – 感謝の種まき –

人生で学んだスキルや知識のアウトプットブログです。旅する自由人を目指すブロガー Hiro先生です。

  • ホーム
  • ひとこと

    Hiroのひとこと♪

    『Hiroの知恵袋🌱』
    有料コミュニティーを オープンしました!
    yoor にて初月無料・翌月から月100円にて
    老若男女無制限ご参加いただけます。

    人間関係、健康、ビジネス、勉強、自己成長 などなど
    人生を豊かにしたい人はご参加ください。
    HiroのBrainを共有します♪

    今すぐ仲間になる

    CSSで背景画像を位置調整、固定、繰り返し表示する方法

    2020年1月31日2020年5月2日HP制作覚書,CSS

    • Tweet
    • このエントリーをはてなブックマークに追加
    目次
    • 1. CSSで背景に画像を繰り返し挿入する
    • 2. CSSで背景に画像を繰り返さずに挿入する
    • 3. CSSで背景に画像を全体に表示する
    • 4. CSSで背景画像のサイズを調整する
    • 5. CSSで背景画像を左右、上下、中央に表示させる
    • 6. CSSで背景画像を左上、右上、左下、右下に表示させる
    • 7. CSSで背景画像を細かく位置調整して表示させる

    CSSで背景に画像を繰り返し挿入する

    以下コードを挿入すると
    指定エリア全画面上に繰り返し表示されます。

    追加したいエリアの指定クラスまたはID{
    background-image: url("画像のURLを差し替える");
    }

    CSSで背景に画像を繰り返さずに挿入する

    以下コードを挿入すると
    元画像のサイズの画像が表示されます。

    追加したいエリアの指定クラスまたはID{
    background-image: url("画像のURLを差し替える");
    background-repeat: no-repeat;
    }

    <スポンサーリンク>



    CSSで背景に画像を全体に表示する

    以下コードを挿入すると
    追加したいエリア全体に画像が表示されます。

    追加したいエリアの指定クラスまたはID{
    background-image: url("画像のURLを差し替える");
    background-size: cover;
    }

    CSSで背景画像のサイズを調整する

    以下コードを挿入することで
    背景の画像サイズを調整することが出来ます。

    40%の項目をそれぞれの画像に合わせて自由に数値を変更されると良いです。

    ちなみに40%のエリアが横幅指定
    autoのエリアが高さ指定
    つまり横幅は40%で高さはそれに準じて自動的に設定されるということです。

    追加したいエリアの指定クラスまたはID{
    background-image: url("画像のURLを差し替える");
    background-repeat: no-repeat;
    background-size: 40% auto;
    }

    また以下パターンでの表記も同じです。

    background-size: 40%;

    この表記の場合は、横幅40%で高さはautoになっています。
    つまり横幅に準じて自動的に調整されます。

    なので上記表記でも下記表記でも同じです。

    CSSで背景画像を左右、上下、中央に表示させる

    以下コードを挿入することで
    背景画像を左右、上下、中央に表示させることが出来ます。

    leftで左、rightで右、topで上、bottomで下、centerで中央に表示させることが出来ます。

    追加したいエリアの指定クラスまたはID{
    background-image: url("画像のURLを差し替える");
    background-position: left;
    background-repeat: no-repeat;
    background-size: 40% auto;
    }

    CSSで背景画像を左上、右上、左下、右下に表示させる

    以下コードを挿入することで
    背景画像を左上、右上、左下、右下に表示させることが出来ます。

    right bottomで右下、right topで右上、left bottomで左下、left topで左上に表示させることが出来ます。

    追加したいエリアの指定クラスまたはID{
    background-image: url("画像のURLを差し替える");
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 40% auto;
    }

    CSSで背景画像を細かく位置調整して表示させる

    以下コードを挿入することで
    ご自身で好きな位置に自由自在に調整して表示させることが出来ます。

    追加したいエリアの指定クラスまたはID{
    background-image: url("画像のURLを差し替える");
    background-position: right 35% bottom 5%;
    background-repeat: no-repeat;
    background-size: 40% auto;
    }

    上記コードは右から35%、下から5%の位置を指定してます。

    この数値は自由に設定してください。

    background-position: right bottom 20px;

    ちなみにこの場合は
    右寄せで下から20pxの位置を指定しています。

    background-position: right 50% bottom 20px;

    このパターンは右から50%、舌から20pxの位置を指定しています。

     

    是非、お試しください。

     
    <スポンサーリンク>




     

     

     

  • サイトマップ
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2019-2022 おかげさま – 感謝の種まき – All Rights Reserved.

WordPress Luxeritas Theme is provided by "Thought is free".

  • 
    ホーム
  • 
    メニュー
  • 
    SNS
  • 
    サイドバー
  • 
    目次
  • 
    検索
  • 
    上へ
 TOP