개발관련/CSS

[CSS] background 4가지 속성 적용법

🐻곰이🐻 2022. 8. 29.

728x90

안녕하세요 곰이에요:)

오늘은 background 속성 설정법에 대해서 알아보려고 합니다.

css에서도 많이들 사용하시는 속성입니다.

background 속성들

1. background-image

2. background-color

3. background-repeat

4. background-position

우선 첫 번째 background-image 속성입니다.

제 헤더에도 적용되어있는 이미지 속성이기도 하고요!

background-image 란?

해당 HTML 요소의 배경으로 나타날 배경 이미지(image)를 설정합니다.

설정된 배경 이미지는 기본 설정으로 HTML 요소 전체에 걸쳐 반복되어 나타납니다.

예제

<style>
	div {
		background-image: url("이미지 주소");
	}
</style>

예제 소스로는 이해가 힘드실 거 같아서 코드 블록과 html블록을 추가해보겠습니다.

곰이네 BACKGROUND 속성

위에 보시는 건 DIV영역을 우선 이해를 돕기 위한 border 스타일을 주었는데요

이렇게 보시듯 div영역 뒷 배경에 눈이 내리는 이미지를 속성에서 추가해서 적용되는 모습을 확인할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>곰이네 BACKGROUND 속성</title>
	<style>
		#example { 
			background-image: url("https://tistory3.daumcdn.net/tistory/4358276/skin/images/back_snow.gif"); 
		}
	</style>
</head>
<body>
	<div style="border:1px solid red; width:300px; height:300px;" id="example">
	</div>
</body>
</html>

위에 눈 내리는 코드 블록입니다.

필요하신 분은 참고해주세요 ^^

background-color 란?

해당 HTML 요소의 배경으로 나타날 배경 색상(color)을 설정합니다.

예제

<style>
    div { 
        background-color : red; 
    }
</style>

예제는 간단합니다.

color 속성

red, blue등 이미 정의된 색

#000, #FFFFFF 등의 16진수 색상 코드

rgb(255, 255, 255) 등의 rgb 색상

rgba(200, 100, 150, 0.5) 등의 알파(투명도)가 적용된 rgba 색상

color속성에서 알 수 있듯 다양하게 속성을 줄 수 있습니다.

곰이네 BACKGROUND 속성

예시 html 블록 코드입니다.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>곰이네 BACKGROUND 속성</title>
	<style>
		#example2 { 
			background-color : red; 
		}
	</style>
</head>
<body>
	<div style="border:1px solid red; width:300px; height:300px;" id="example2">
	</div>
</body>
</html>

참고용 html 코드 블록입니다.

background-repeat 란?

배경 이미지는 기본 설정으로 수평과 수직 방향으로 모두 반복되어 나타납니다.

background-repeat 속성을 이용하면 이러한 배경 이미지를 수평이나 수직 방향으로만 반복되도록 설정할 수 있습니다.

수평 예제

background-repeat: repeat-x; 속성 추가하면 됩니다.

곰이네 BACKGROUND 속성

수평 소스

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>곰이네 BACKGROUND 속성</title>
	<style>
		#example3 { 
			background-image: url("https://tistory3.daumcdn.net/tistory/4358276/skin/images/back_snow.gif");
			background-repeat: repeat-x;
		}
	</style>
</head>
<body>
	<div style="border:1px solid red; width:100%; height:300px;" id="example3">
	</div>
</body>
</html>

수직 예제

background-repeat: repeat-y; 속성 추가하면 됩니다.

곰이네 BACKGROUND 속성

수직 소스

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>곰이네 BACKGROUND 속성</title>
	<style>
		#example4 { 
			background-image: url("https://tistory3.daumcdn.net/tistory/4358276/skin/images/back_snow.gif");
			background-repeat: repeat-y;
		}
	</style>
</head>
<body>
	<div style="border:1px solid red; width:100%; height:600px;" id="example4">
	</div>
</body>
</html>

참고용 예제 소스입니다.

background-position 란?

background-position 속성은 반복되지 않는 배경 이미지의 상대 위치(relative position)를 설정합니다.

오른쪽 위치 예제

곰이네 BACKGROUND 속성

오른쪽에 나타나는 걸 확인할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>곰이네 BACKGROUND 속성</title>
	<style>
		#example5 { 
			background-image: url("https://tistory3.daumcdn.net/tistory/4358276/skin/images/back_snow.gif");
			background-repeat: no-repeat;
			background-position: top right;
		}
	</style>
</head>
<body>
	<div style="border:1px solid red; width:100%; height:300px;" id="example5">
	</div>
</body>
</html>

참고용 예제 소스

중간 위치 예제

곰이네 BACKGROUND 속성

중간에 나타나는걸 확인할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>곰이네 BACKGROUND 속성</title>
	<style>
		#example6 { 
			background-image: url("https://tistory3.daumcdn.net/tistory/4358276/skin/images/back_snow.gif");
			background-repeat: no-repeat;
			background-position: top center;
		}
	</style>
</head>
<body>
	<div style="border:1px solid red; width:100%; height:300px;" id="example6">
	</div>
</body>
</html>

이해에 도움이 되는 사진 올려드리겠습니다.

만약 중간에 위치하게 하고 싶으면 앞에 top 또는 bottom을 빼고 해 보시길 바랍니다 ^^

이것으로 background 속성 포스팅을 마치겠습니다.

궁금하신 점은 댓글 남겨주세요!

구독과 공감은 사랑입니다 ^^

저작자표시 비영리 변경금지

'개발관련 > CSS' 카테고리의 다른 글

Parallax Scrolling CSS설정만으로 티스토리 적용 법 (0)	2022.09.14

[CSS] background 4가지 속성 적용법

'개발관련 > CSS' 카테고리의 다른 글

댓글

티스토리툴바