1. 배경 이미지를 삽입하는 방법 (background-image)
CSS에서 배경에 이미지를 삽입할 때 사용하는 속성인 background-image를 사용하여 배경 이미지를 적용할 수 있습니다. 이 속성은 요소의 배경에 이미지를 표시하는 역할을 합니다.
기본 문법
selector {
background-image: url("이미지파일의경로");
}위의 코드에서 url("이미지파일의경로") 부분에는 삽입하고자 하는 배경 이미지 파일의 경로를 작성합니다. 경로는 상대 경로나 절대 경로로 지정할 수 있으며, 이미지 파일의 확장자는 반드시 포함되어야 합니다. 이 때, 이미지 파일의 경로는 따옴표나 따옴표 없이 작성할 수 있습니다.
예시
body {
background-image: url("background.jpg");
}위의 예시는 body 요소의 배경에 background.jpg라는 이미지 파일을 삽입하는 것을 보여줍니다. 해당 이미지 파일은 CSS 파일과 같은 디렉토리에 위치해야 합니다.
참고:
background-image속성은 단독으로 사용할 수도 있지만, 보통 다른background속성과 함께 사용하여 다양한 배경 설정을 할 수 있습니다. 이에 대한 내용은 다음 항목에서 다룰 것입니다.
2. 배경 이미지의 속성과 값 (background 속성)
CSS의 background 속성을 사용하면 배경 이미지를 더 다양한 방식으로 조작할 수 있습니다. background 속성에는 여러 가지 하위 속성이 있으며, 이를 조합하여 원하는 배경 이미지 스타일을 설정할 수 있습니다.
기본 문법
selector {
background: [background-color] [background-image] [background-repeat] [background-position];
}background 속성은 공백으로 구분된 여러 하위 속성을 동시에 지정할 수 있습니다. 하위 속성은 순서에 따라서도 적용되며, 필요한 경우 하위 속성을 생략할 수도 있습니다. 모든 하위 속성은 선택적으로 사용하며, 필요한 속성만 지정할 수 있습니다.
하위 속성 설명
background-color: 배경 색상을 지정합니다. 일반적으로 색상 값을 사용하지만,transparent속성을 이용하여 투명 배경으로 설정할 수도 있습니다.background-image: 배경 이미지를 지정합니다. 속성 값으로 이미지 파일의 경로를 설정할 수 있습니다.background-repeat: 배경 이미지의 반복 여부를 지정합니다.repeat,repeat-x,repeat-y,no-repeat등의 값이 있습니다.background-position: 배경 이미지의 위치를 설정합니다.top,right,bottom,left,center등의 값 또는 백분율과 픽셀 값을 사용할 수 있습니다.
예시
body {
background: #f5f5f5 url("background.jpg") repeat-x top center;
}위의 예시는 body 요소의 배경에 회색(#f5f5f5) 배경 색상을 설정하고, background.jpg라는 이미지 파일을 반복하여 가로로 적용하며, 위치는 상단 중앙으로 설정하는 것을 보여줍니다. 이렇게 background 속성을 사용하면 필요한 배경 이미지와 스타일을 한 번에 설정할 수 있습니다.
3. 배경 이미지의 추가적인 설정 (background-repeat, background-position 등)
CSS에서 배경 이미지를 보다 정교하게 다루기 위해 background-repeat과 background-position 등의 속성을 사용할 수 있습니다. 이러한 속성을 이용하면 배경 이미지의 반복 방식과 위치를 세밀하게 설정할 수 있습니다.
background-repeat 속성
background-repeat 속성은 배경 이미지의 반복 방식을 지정합니다. 기본적으로 배경 이미지는 수직, 수평 방향으로 모두 반복되지만, background-repeat 속성을 사용하여 반복을 제어할 수 있습니다.
repeat: 가로와 세로 모두 반복합니다. (기본값)repeat-x: 가로로만 반복합니다.repeat-y: 세로로만 반복합니다.no-repeat: 반복하지 않습니다.
background-position 속성
background-position 속성은 배경 이미지의 위치를 지정합니다. 기본적으로 배경 이미지는 왼쪽 상단에 위치합니다.
top,right,bottom,left: 배경 이미지가 해당 방향의 가장자리에 위치합니다.center: 배경 이미지가 가로와 세로의 중심에 위치합니다.%: 배경 이미지가 요소의 가로 또는 세로 축에서 해당 백분율 위치에 위치합니다. 예를 들어background-position: 50% 50%;은 배경 이미지를 요소의 가로와 세로의 중심에 위치시킵니다.px: 배경 이미지가 요소의 가로 또는 세로 축에서 해당 픽셀 위치에 위치합니다. 예를 들어background-position: 10px 20px;은 배경 이미지를 왼쪽으로 10px, 위로 20px 이동시킵니다.
예시
body {
background: #f5f5f5 url("background.jpg") repeat-x top center;
}위의 예시에서 repeat-x는 배경 이미지가 가로로만 반복되고, top center는 배경 이미지가 상단 중앙에 위치하도록 설정됩니다. 이렇게 background-repeat과 background-position 속성을 활용하여 배경 이미지의 반복과 위치를 세밀하게 조정할 수 있습니다.