background속성
background :배경 속성을 한 번에 지정할 수 있다
background-attachment :페이지가 스크롤 될 경우 배경의 이미지를 고정시킬 것인지를 지정한다.
background-color :배경 색을 지정. 투명하게 하고 싶으면 transparent를 사용 가능
background-image :배경의 이미지를 지정한다. url('~.gif')라고 지정
background-position :배경 그림의 위치를 지정한다 top,bottom,center,left,right,px,%등을 통해 지정
background-repeat :배경 이미지의 반복 여부를 지정한다. repeat-x, repeat-y, no-repeat를 값으로 사용. repeat이 기본값.
백그라운드는 배경이미지보단 검색창에 들어가는 아이콘 or 검색창 틀, 배너나 클릭용 이미지 등에 주로 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
border:1px solid #777;
width:300px;
height: 300px;
}
.tx1{
background-color: aqua;
background-image:url('img/bgimg.png');
background-repeat: no-repeat;
background-size: 200px;
background-position: -30px -30px;/* 50% 50%; */ /* 50px 50px;왼쪽, 위쪽*/
}
</style>
</head>
<body>
<p class="tx1">
우리집 강아지는 장군이 인데, 참 속을 많이 썩인다.<br>
정신차리자<br>
정신차리자<br>
정신차리자<br>
</p>
</body>
</html>
background-position은 50px or -50px같은 방식으로 왼쪽오른쪽, 위아래를 조정 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{padding:0; margin: 0;}
header{height:300px; background-color: aqua;}
article{
height: 500px;
background-image: url('img/back.jpg');
background-attachment: fixed;/* 스크롤이 기본값 */
background-size: cover;/* contain-백그라운드가 잘리지 않도록 하고 나머지는 비움(기본으로 repeat됨). cover는 빈공간없이 채움, 나머지는 비움*/
}
section{height:100vh; background-color: pink;}
footer{height: 300px; background-color: yellow;}
</style>
</head>
<body>
<header>
헤더...
</header>
<article>
글영역....
</article>
<section>
본문..
</section>
<footer>
푸터..
</footer>
</body>
</html>
background-attachment와 backgorund-size 등을 통해 스크롤할 때 이미지가 원하는 형식으로 보이게 하는 것이 가능
'HTML·CSS' 카테고리의 다른 글
| 221221 HTML CSS 패딩마진, box-sizing (0) | 2022.12.21 |
|---|---|
| 221221 HTML CSS border 추가 (0) | 2022.12.21 |
| 221220 HTML CSS display 실습 (0) | 2022.12.20 |
| 221220 HTML CSS display (0) | 2022.12.20 |
| 221220 HTML CSS 텍스트와 BORDER (0) | 2022.12.20 |
