📌

画像を背景にする_html&css

2023/09/16に公開

CSS

HTML

画像

tech

point

・background-image
・background-position
・background-size

sizeに指定するものを変えると、divタグと画像の大きさの関係を操作できる

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画像を背景にする</title>
    <style>
        .bgimage{
            width: 500px;
            height: 500px;
            color: whitesmoke;
            text-align: center;
            padding-top: 30px;

            background-image: url("https://images.unsplash.com/photo-1694556586933-5b6202a85e6b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80");
            background-position: center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <h1>画像を背景にする</h1>
    <div class="bgimage">
        <h3>unsplash.com</h3>
        <h5>隣り合った高層ビルのグループ</h5>
    </div>
    <p><a href="https://unsplash.com/ja/%E5%86%99%E7%9C%9F/%E9%9A%A3%E3%82%8A%E5%90%88%E3%81%A3%E3%81%9F%E9%AB%98%E5%B1%A4%E3%83%93%E3%83%AB%E3%81%AE%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97-aX_T4WntDBk">画像引用元</a></p>
</body>
</html>

codesandbox：https://9x6f52.csb.app/

point

Discussion