background는 특정 사진을 배경에 입히는것.
여태까지 body 안에 있는 항목들의 Style을 조정했는데
배경을 입히고 싶다면 그냥 body에 Style을 주면 된다.
먼저 간단하게 색깔을 입히는 방법
<html>
<head>
<meta charset="UTF-8">
<title>배경 꾸미기</title>
<link rel="icon" href = "btn.png">
<style>
h1{
background-color: aquamarine;
}
div{
background-color: blanchedalmond;
}
body{
background-color: coral;
}
</style>
<!--스타일이 많으면 로딩이 느려질 수 있다.-->
<!--아이디가 # 클래스가 . 태그는 p-->
</head>
<body>
<h1>Welcome To CSS page</h1>
<p>CSS background color</p>
<div>background area</div>
</body>
</html>
다음으로는 이미지를 직접 지정하여 띄우는 방법이다.
CSS 파일을 만든 폴더에 img 폴더를 만들고 picture.gif라는 파일을 넣어 놨다.
이미지는 아무거나 사용해도 된다.
<html>
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<link rel="icon" href="img/btn.png">
<style>
body{
/*화면보다 이미지가 작으면 x/y 축으로 반복 된다.*/
background-image: url("img/picture.gif");
/*
한쪽 축으로 이미지를 반복
background-repeat: repeat-x;
background-repeat: repeat-y;
*/
/*반복 하지 않고*/
background-repeat: no-repeat;
/*원하는 위치에 배치하기*/
/*background-position: 위치 속성*/
background-position: right bottom;
}
</style>
</head>
<body>
</body>
</html>
마지막에 right bottom이라고 하여 우측 아래에 출력된 화면
주석을 하거나 지워서 확인해보자
마지막으로 이미지 사이즈를 바꿔보자
<html>
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<link rel="icon" href="img/btn.png">
<style>
body{
/*이미지가 화면 보다 크면 전부 표시되지 않는다.*/
background-image: url(img/201801_type1_1920.jpg);
/*이미지 크기 변경으로 해결*/
/*background-size: 100% 100%와 같이 비율로 조정도 가능*/
/*
이미지 크기 변경 방법
1. 사이즈 입력
2. cover - 이미지가 클 경우 화면에 맞춰 자른다.(기본)
3. contain - 비율이 벗어나지 않는 선에서 축소
background-size: 속성;
*/
background-size: contain;
}
</style>
</head>
<body>
</body>
</html>
첫번째는 아무 속성을 주지 않아 사진이 커서 화면 밖으로 삐져 나갔다.
두번째는 contain을 사용.
주석을 통해 직접 실행하여 차이를 확인해보자.
'HTML, CSS, JavaScript, jQuery > 03.CSS' 카테고리의 다른 글
| [CSS]03-07.display, visibility, 요소 숨기기 / 보이기 / 삭제 / 블록 / 인라인 (0) | 2018.10.17 |
|---|---|
| [CSS]03-06.배운 내용 활용해서 사이트의 메뉴 바 만들기 (0) | 2018.10.17 |
| [CSS]03-05.float, link 정렬, 링크 속성, 이미지 밑줄 삭제 (0) | 2018.10.17 |
| [CSS]03-02.Border, 테두리 선 (0) | 2018.10.16 |
| [CSS]03-01.CSS, Style, 선택자 (0) | 2018.10.16 |