2021-03-09
css에서 스타일에서 기본 백그라운드를 설정하면, 백그라운드의 이미지가 좌측 맨 위에 위치해 있는 것을 볼 수 있다. 또한 점차 백그라운드 옵션을 준 블록 태그에 크기가 커짐에 따라 백그라운드가 이미지가 반복되어 들어가는 경우가 있는데 오늘은 이 부분을 해결하는 방법을 알아보자.
- 코드
(백그라운드 url 이미지 출처: 위키피디아)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#IsCenter{
text-align: center;
}
.test{
/* 위키피디아 지구사진 참고 */
background: url("https://bit.ly/3e22Imq");
/*백그라운드 위치 옵션을 center 정중앙에 위치 */
background-position: center;
/*기본적으로 백그라운드의 옵션은 repeat이다. */
background-repeat: no-repeat;
/* 백그라운드 이미지를 보여주기 위한 크기 옵션 */
weight: 500px;
height : 500px;
/* 외부 여백 옵션 */
margin: 50px;
}
</style>
</head>
<body>
<div class="test">
</div>
</body>
</html>
해당 방법은 모두 background-XXXX 와 같은 옵션 태그로 설정하면 된다. 이미지 한 장을 정중앙에 위치시키기 위해서는 background-position: center; / 이미지의 반복을 없애기 위해서는 background-repeat: no-repeat; 와 같은 태그를 사용하면, 한 장의 이미지만 정중앙에 위치하여 백그라운드의 역할을 하는 것을 알 수 있다.