250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

커리까지

[생활코딩] CSS 수업 - 배경 본문

CSS

[생활코딩] CSS 수업 - 배경

목표는 커리 2021. 3. 30. 05:02
728x90
SMALL
<!doctype>
<html>
<head>
<style>
    div{
        font-size: 100px;
        height: 500px;
        border:5px solid gray;
        background-image: url(https://img.hankyung.com/photo/201910/AKR20191001176700005_03_i.jpg);
        background-repeat: no-repeat;
/*        background-attachment: scroll;*/
/*        background-size: contain;*/
        background-position: right top;
    }
    </style>
    </head>
    <body>
        <div>
            Hello world Hello world
            Hello world Hello world
            Hello world 
            Hello world

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

  • background-repeat : 배경 반복 여부

    • no-repeat : 반복 안 함
    • repeat-x : 가로로 반복
    • repeat-y : 세로로 번복

  • background-attachment : 배경을 고정할 것인지 아니면 같이 움직일 것인지

  • background-size : 배경 크기

  • background-position : 배경 위치

background:  url(https://img.hankyung.com/photo/201910/AKR20191001176700005_03_i.jpg) no-repeat fixed center;
  • 이렇게 축약도 가능하다.
728x90
LIST
저작자표시

'CSS' 카테고리의 다른 글

[생활코딩] CSS 수업 - blend 1 : 소개  (0) 2021.04.01
[생활코딩] CSS 수업 - filter  (0) 2021.03.31
[생활코딩] CSS 수업 - float 2 : holy grail layout  (0) 2021.03.29
CSS 수업 - float 1  (0) 2021.03.26
CSS 수업 : mediaquery 1 - 기본  (0) 2021.03.25
'CSS' Related Articles more
Comments