HTML에서 이미지 배경을 설정하는 방법은 무엇입니까? 배경 속성 소개

웹 디자인에서는 때로는 웹 페이지를 아름답게 하기 위해 사진을 배경으로 사용해야 할 때가 있습니다. HTML은 이미지의 배경을 설정하는 다양한 방법을 제공합니다. 이 기사에서는 CSS의 background 속성을 사용하여 이미지의 배경을 설정하는 방법을 소개합니다.

1. 이미지 배경을 설정하려면 background-image 속성을 사용하세요.

background-image 속성은 요소의 배경 이미지를 설정하는 데 사용되며 하나 이상의 이미지 파일을 지정할 수 있으며 다른 배경 속성과 함께 사용할 수 있습니다.

구문은 다음과 같습니다.

background-image: url(path);

그 중 url()은 이미지의 경로를 지정하는데, 상대 경로 또는 절대 경로가 될 수 있습니다. 예를 들어 다음 코드는 이미지 배경을 설정합니다.

body {
  background-image: url(bg.jpg);
}

이 예에서는 bg.jpg 이미지가 전체 페이지의 배경으로 사용됩니다. HTML에서는 이 CSS 코드를 스타일 태그나 외부 CSS 파일에 배치한다는 점에 유의해야 합니다.

2. background-repeat 속성과 background-position 속성을 사용합니다.

일반적으로 이미지의 반복 방식과 위치도 설정해야 합니다. 이때 background-repeat 속성과 background-position 속성을 사용해야 합니다. .

1. background-repeat 속성

background-repeat 속성은 배경 이미지의 반복 모드를 설정하는 데 사용됩니다. 다음 값을 사용할 수 있습니다.

• repeat: 기본값, 배경 이미지가 반복적으로 표시됩니다. 수평 및 수직 방향.
• repeat-x: 수평 방향으로만 표시를 반복합니다.
• repeat-y: 수직 방향으로만 반복 표시합니다.
• no-repeat: 반복해서 표시하지 않습니다.

예를 들어 다음 코드에서는 배경 이미지가 가로 방향으로만 반복되도록 설정합니다.

body {
  background-image: url(bg.jpg);
  background-repeat: repeat-x;
}

2. Background-position attribute

background-position 속성은 배경 이미지의 시작 위치를 설정하는 데 사용됩니다. 값:

• top: 배경 이미지가 위에서부터 표시됩니다.
• 하단: 하단부터 배경 이미지가 표시됩니다.
• center: 배경 이미지가 중앙에 표시됩니다.
• 왼쪽: 배경 이미지가 왼쪽부터 표시됩니다.
• right: 배경 이미지가 오른쪽부터 표시됩니다.

일반적으로 다음 방법을 사용하여 배경 위치 속성을 설정할 수 있습니다.

body {
  background-position: x-axis y-axis;
}

그 중 x축과 y축은 왼쪽과 위쪽으로부터의 오프셋을 나타냅니다(특정 값은 다음과 같은 단위를 사용할 수 있습니다). 픽셀 및 백분율) , 하나의 값만 설정된 경우 기본값은 가로 오프셋이고, 세로 오프셋은 기본적으로 중앙 정렬입니다.

예:

body {
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
}

이 예에서는 배경 이미지가 반복되지 않고 가운데 상단부터 표시되도록 설정합니다.

3. background-size 속성을 사용하세요.

background-size 속성은 배경 이미지의 크기를 설정하는 데 사용됩니다. 다음 값을 사용할 수 있습니다.

• auto: 기본값, 배경 이미지가 원래 크기로 표시됩니다.
• cover: 요소 영역을 완전히 덮도록 배경 이미지의 크기를 조정합니다(배경 이미지가 잘릴 수 있음).
• contain: 요소 영역에 완전히 맞도록 배경 이미지를 최대한 줄입니다(약간의 공백이 있을 수 있음).
• 크기 지정: 픽셀, 백분율 등의 단위를 사용하여 배경 이미지의 크기를 지정할 수 있습니다.

예를 들어 다음 코드에서는 배경 이미지가 요소 영역에 완전히 맞도록 최대한 작게 설정됩니다.

body {
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

요약

배경 속성을 사용하면 요소의 배경 이미지를 쉽게 설정할 수 있습니다. 웹 페이지. 배경 이미지, 배경 반복, 배경 위치, 배경 크기의 4가지 속성을 통해 이미지의 경로, 반복 방식, 시작 위치, 크기를 설정할 수 있으므로 필요에 따라 유연하게 사용하시기 바랍니다.

위 내용은 HTML에서 이미지 배경을 설정하는 방법은 무엇입니까? 배경 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!