[CSS] background


<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                border: 5px solid gray;
                background-color: blueviolet;
                background-image: url(5-6.\ img\ file.PNG);
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <div>
            Hello github
        </div>
    </body>
</html>
結果
  • background-color: blueviolet;およびbackground-image: url(5-6.\ img\ file.PNG);を併用することができる.色は見えませんが、透明な画像で色も見えます.
  • <!DOCTYPE html>
    <html>
        <head>
            <style>
                div{
                    border: 5px solid gray;
                    background-color: blueviolet;
                    background-image: url(5-6.\ img\ file.PNG);
                    font-size: 100px;
                    background-repeat: no-repeat;
                    background-attachment: fixed;
                }
            </style>
        </head>
        <body>
            <div>
                Hello github<br>Hello github<br>Hello github<br>Hello github<br>Hello github<br>Hello github<br>Hello github<br>Hello github<br>Hello github<br>
            </div>
        </body>
    </html>
    結果
  • background-repeat: no-repeat;重複画像を避ける
  • background-attachment: fixed;で画像を固定します.スクロールしても位置が固定されます.
  • background-size: contain;を追加すると、画像はウィンドウサイズに応じて移動します.
  • background-position: center center;を真ん中にします.
  • 背景にはサムネイルもあります.