속성 - background

Robyn·2023년 4월 8일
0
<!doctype html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <title>form</title>
    <style>
        div {
            background: #a7a574;
            background-image: url('https://www.ica.art/media/05929.jpg');
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: scroll;
            background-size: 300px;
            width: 500px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

축약형

        div {
            background: #a7a574 url('https://www.ica.art/media/05929.jpg') no-repeat scroll center;
            background-size: 300px;
            width: 500px;
            height: 400px;
        }

background-attachment: fixed하면 스크롤을 해도 그 자리에 딱 고정되어있다.
이 속성은 브라우저 성능에 영향을 미치기 때문에 많이 사용되진 않는다.

축약형
bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit

0개의 댓글