○ background-image : 배경 이미지 삽입
우선 HTML 문서에 배경을 넣는 가장 기본적인 스타일 속성 작성 방식을 살펴보겠습니다. 우선 background-image 속성에 url 키워드를 사용하게 됩니다. 기본형은 다음과 같습니다.
선택자 {
background-image: url('이미지 경로');
}
위에서 사용하는 이미지 경로는, 상대 경로 혹은 절대 경로를 사용할 수 있습니다. 이미지의 경우 jpg, gif, png 형식을 사용하게 됩니다. 여기까지는 사용에 큰 문제가 없을 텐데, 화면을 채우는 방식을 주의깊게 살펴보아야 합니다.
○ background-repeat : 배경 이미지 반복 배치
예를 들어 다음과 같이 특정 이미지를 배경으로 지정했다고 가정해 보겠습니다. 그러면 해당 이미지는 브라우저를 자동으로 반복해서 가득 채우게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>example</title>
<meta charset="UTF-8">
<style>
body {
background-image: url(images/255_CSS3_logo.png);
}
</style>
</head>
<body>
</body>
</html>
이제, 위 속성에 background-repeat 속성을 더해 이미지의 반복 배치 형태를 컨트롤할 수 있습니다. 형태는 아래와 같습니다.
선택자 {
background-repeat: repeat | repeat-x | repeat-y | no-repeat
}
아마 속성 값의 명칭에서 어떻게 작용하게 되는지는 쉽게 예측이 되셨을 것입니다. repeat는 디폴트 값이며(전체 채우기 반복) / repeat-x는 가로로만 이미지를 가득 채우고 / repeat-y는 세로로만 이미지를 가득 채우며 / no-repeat은 반복 없이 한 개의 이미지만 배경에 배치되는 형태입니다.
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 3 (0) | 2023.05.06 |
|---|---|
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 2 (0) | 2023.05.04 |
| [CSS] 5. 배경 이미지와 그라데이션(1) - background color & clip (0) | 2023.05.01 |
| [CSS] 4. 레이아웃 설계(3) - position과 위치 속성 4 : fixed, sticky (0) | 2023.04.27 |
| [CSS] 4. 레이아웃 설계(3) - position과 위치 속성 3 : absolute (1) | 2023.04.25 |
