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] attr 실습5 - 배경 적용하기 본문

CSS

[css] attr 실습5 - 배경 적용하기

by jade 2024. 1. 13. 12:33

display : inlilne-block

background-image: url('https://')

background-position

background-repeat

background-size 활용하여 css 배경을 적용해 보았다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>attr4실습 - 배경 적용하기</title>
    <style>
body{
    height: 2000px;
}

.box{
    display: inline-block;
    width: 800px;
    height: 500px;
    background-color: skyblue;
}

.background-image01{
    background-image: url('https://item.kakaocdn.net/do/d84248170c2c52303db27306a00fb861f604e7b0e6900f9ac53a43965300eb9a');
    background-position: center;
    background-repeat: repeat-x;
}
.background-image02{
    background-image: url('https://item.kakaocdn.net/do/d84248170c2c52303db27306a00fb861f604e7b0e6900f9ac53a43965300eb9a');
    background-size: contain;
    background-position:100px 30px;
    background-repeat: no-repeat;
}
.background-image03{
    background-image: url('https://item.kakaocdn.net/do/d84248170c2c52303db27306a00fb861f604e7b0e6900f9ac53a43965300eb9a');
    background-size: cover; 
}

    </style>
</head>
<body>
    <div class="box background-image01"></div>
    <div class="box background-image02"></div>
    <div class="box background-image03"></div>

</body>
</html>

 

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

'CSS' 카테고리의 다른 글

[css] position 실습 - 애벌레 만들기  (0) 2024.01.13
[css] attr 실습6 - flex-direction, flex-wrap, align-content  (0) 2024.01.13
[css] attr 실습4 - 요소 쌓임 순서 및 z-index  (0) 2024.01.12
[css] attr 실습3 - position : relative/absolute/fixed  (0) 2024.01.12
[css] attr 실습2 - border 테두리 그리기  (0) 2024.01.12
'CSS' Related Articles more