새소식
반응형
WEB/CSS
[CSS] CSS 백그라운드 이미지 가운데 정렬하는 / 반복없애는법
- -
반응형
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; 와 같은 태그를 사용하면, 한 장의 이미지만 정중앙에 위치하여 백그라운드의 역할을 하는 것을 알 수 있다.
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] CSS text-align 을 통한 데이터(텍스트)정렬 방법 알아보기 (0) | 2021.03.11 |
|---|---|
| [CSS] CSS white-space 개행문자를 처리하는 방법 알아보기. (0) | 2021.03.10 |
| [CSS] CSS 포지션(position) Relative / Absolute 알아보자! (0) | 2020.10.15 |
| [CSS] CSS 캐스케이딩Cascading에 대하여 쉽게 알아보자! (0) | 2020.10.11 |
| [CSS] Selector(ID) / Selector(Class) CSS선택자 알아보기! (0) | 2020.10.03 |
Contents
소중한 공감 감사합니다