Notice
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
관리 메뉴

Jade_o.o

[css] background 속성 본문

CSS

[css] background 속성

by jade 2024. 1. 11. 15:40 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS - background 속성</title>
    <link rel="stylesheet" href="./attr4.css">
</head>
<body>
    <h2>background 속성</h2>
    <!-- .box*2 -->
    <div class="box background"></div>
    <div class="box background-image"></div>
</body>
</html>

html 코드

 

body{
    height: 2000px;
}

.box{
    display: inline-block;
    width: 400px;
    height: 500px;
    border: 1px solid black;
}

.background{
    background-color: palegreen;
    background: aquamarine;
    /* 단축 속성 */
    /* background: color image repeat position/size; */
    /* deg, to top, to bottom */
    /* background: linear-gradient(45deg,black,white,orange); */
    background: linear-gradient(to bottom,black,white,orange);
}

.background-image{
    background-image: url('./img/small_img.png');

    /* 1. background-repeat */
    background-repeat: repeat;
    background-repeat: repeat-y;
    background-repeat: repeat-x;
    background-repeat: no-repeat;

    /* 2. background-position */
    /* center, bottom, left, right, top의 키워드로 지정 가능*/
    /* background-position: center;
    background-position: center top; */
    /* background-position: 100px 200px; */
    /* background-position: 100px; */
    /* background-position: center; */


    /* 3. background-size */
    /* background-size: 50px;  */
    /*하나만 쓰면 가로값만 적용*/
    /* background-size: 90px 50px;  */
    /*두개 쓰면 가로세로값 적용*/
    /* background-size: contain;  */
    /*비율을 유지, 요소의 더 짧은 너비에 맞춤*/
    background-size: cover; 
    /*비율을 유지, 요소의 더 넓은 너비에 맞춤*/
    
    
    /* 4. background-attachment */
    background-attachment: fixed;
    background-color: pink;

}

css 코드

 

코드 실행 시 결과창

저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

[css] transform & transition  (0) 2024.01.11
[css] display:flex  (2) 2024.01.11
[css] position  (0) 2024.01.11
[css] 박스 모델 속성  (0) 2024.01.11
[css] 문자 관련 속성  (0) 2024.01.11
'CSS' Related Articles more