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