특정 엘리먼트에 배경 이미지나 배경 컬러를 정의하는 것이 백그라운드라는 효과입니다.
[ 대표적인 속성 ]
- background-color : red; → 백그라운드의 색상을 결정 해주는 속성
- background-image : url(); → 백그라운드의 이미지를 삽입 해주는 속성
- background-repeat : no-repeat (repeat, repeat-x, repeat-y) → 백그라운드 이미지의 반복 여부를 결정하는 속성
- background-attachment : fixed (scroll)
→ 배경 이미지를 뷰포트 내에서 고정 할 지 아니면 자신의 컨테이닝 블록과 함께 스크롤 할 지 지정하는 속성
즉, 배경 이미지의 스크롤 여부를 정하는 속성 - background-size : contain (cover)
→ cover : 이미지가 넘치더라도 화면을 꽉 채워서 보일 수 있게 해준다.
→ contain : 이미지를 흘리는 것 없이 채워 넣는다.
- background-position: center bottom (첫번째가 가로, 두번째가 세로 위치 결정)
위 속성들을 축약 해서 작성 할 수 있다.
background: tomato url("") no-repeat fixed center;[ 실습 ]
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 100px;
height: 500px;
border: 5px solid gray;
background-color: tomato;
background-image: url("https://i.pinimg.com/474x/7d/cb/03/7dcb038383028cc9bcfcb0da425a8cec.jpg");
background-repeat: no-repeat;
/* background-attachment: fixed; */
/* background-attachment : 배경 이미지를 뷰포트 내에서 고정 할 지 아니면 자신의 컨테이닝 블록과 함께 스크롤 할 지 지정합니다.
즉, 배경 이미지의 스크롤 여부를 정하는 속성입니다. */
/* background-size: contain; */
/* cover : 이미지가 넘치더라도 화면에 다 보일 수 있게 한다. / contain : 이미지를 흘리는 것 없이 채워 넣는다. */
background-position: center bottom;
background: tomato
url("https://i.pinimg.com/474x/7d/cb/03/7dcb038383028cc9bcfcb0da425a8cec.jpg")
no-repeat fixed center;
/* 축약형 */
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda vitae
adipisci magni quas aut perspiciatis, ipsam officia expedita dignissimos
magnam quae quos voluptates ipsa, laboriosam provident autem deleniti
modi!
</div>
</body>
</html>
'프레임워크 > CSS' 카테고리의 다른 글
| [생활코딩] blend (0) | 2022.02.05 |
|---|---|
| [생활코딩] filter (0) | 2022.02.05 |
| [생활코딩] float (1) | 2022.02.04 |
| [생활코딩] Media Query (0) | 2022.02.04 |
| [생활코딩] Multi Column (0) | 2022.02.04 |
댓글