반응형
배경(Background)
요소의 배경 효과를 주기위한 스타일 설정
★ background-color : 배경색상을 지정하는 속성
★ background-image : 배경 이미지를 지정하는 속성
★ background-repeat : 배경 이미지의 반복 여부 지정 속성
★ background-attachment : 배경 이미지의 스크롤 및 고정 여부 지정
★ background-position : 배경 이미지의 위치 지정
※ 9곳의 위치 지정
- left : 왼쪽 세로 중앙.
- right : 오른쪽 세로 중앙.
- top : 위쪽 가로 중앙.
- bottom : 아래쪽 가로 중앙.
- center : 공간의 정 중앙
- left top : 왼쪽 상단.
- left bottom : 왼쪽 하단.
- right top : 오른쪽 상단.
- right bottom : 오른쪽 하단.
★ background-size : 배경의 크기를 지정
★ background : 위의 개별 속성을 하나로 처리하기 위한 단축 속성 배경 크기를 제외한
색상, 이미지, 반복여부, 스크롤여부, 위치를 한 문장으로 작성할 수 있음.
순서 : 색상 > 이미지 > 반복여부 > 스크롤여부 > 위치 사용하지 않는 속성은
작성하지 않는다.
background_image.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배경(Background)</title>
<style type="text/css">
body {
background-image: url("images/bg.jpg");
background-repeat: repeat-y;
background-attachment: fixed;
}
div {
height: 1000px;
/*
background-color: rgba(255,255,255,0.5);
background-image: url(images/jo.jpg);
background-repeat: no-repeat;
background-position: right top;
*/
background: rgba(255,255,255,0.5)
url(images/jo.jpg)
no-repeat
top right;
background-size: 300px;
}
</style>
</head>
<body>
<div>여기에 이미지가 출력됩니다.</div>
</body>
</html>반응형
'Front-end > Css' 카테고리의 다른 글
| [CSS] 여백(margin, padding) (0) | 2023.07.06 |
|---|---|
| [CSS] 테투리(경계선) (0) | 2023.07.06 |
| [CSS] 색상표현 (0) | 2023.07.06 |
| CSS 가상 선택자4(::first-line, ::first-letter, ::before, ::after) (0) | 2023.05.16 |
| CSS 가상 선택자3(:disabled, :checked) (0) | 2023.05.16 |
