CSS 배경 속성 설명

CSS 배경 속성

우리는 웹사이트의 뒷면이 다른 색상인 것을 정기적으로 봅니다. 일부 웹사이트에는 뒷면에 이미지가 있습니다. 어딘가에 다시 한 개 이상의 이미지가 있습니다. 이들 중 일부는 CSS 배경 속성으로 설정됩니다. CSS 배경은 전체 웹 페이지나 특정 HTML 요소 또는 요소의 작은 부분 뒤에 색상이나 이미지를 설정하는 데 사용됩니다. 다음 스타일 규칙을 사용하여 주로 사용되는 CSS 배경 속성을 지정할 수 있습니다.

background-color: Used to give a specific color.

background-image: Used to give one or more images.

background-repeat: The rule is written whether to repeat the image file or not.

background-attachment: The rule is written whether the image used in the background will scroll or stay in a certain place.

background-position: The rule is where the position of the image will be written.

나는 이 모든 것에 대한 예를 한 페이지에 제시하려고 노력할 것입니다. 배경색부터 시작하겠습니다. background-color는 요소의 뒷면 색상입니다. 그리고 다음과 같이 쓰여 있습니다.

배경색:

h1{
background-color:red;
}

색상 이름 대신 색상 코드를 사용할 수도 있습니다. 여기로 가시면 you will find the names and codes of HTML color.

h1{
background-color:#808080;
}

배경 이미지:

background-image: background-image HTML 요소 뒤의 이미지를 설정합니다. 여기에서는 배경 이미지를 사용하여 전체 사이트의 배경에 이미지를 설정합니다. 이를 위해 다음과 같이 작성합니다.

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

URL을 사용하여 이미지가 괄호 안에 있는 위치를 설정해야 합니다. 그래서 우리는 위에서했습니다. 이미지와 html 파일이 같은 폴더에 있으면 이미지 이름만 입력하면 됩니다. 예를 들어 배경 이미지: url(highway.jpg);

이제 배경 반복으로 갑시다.

이미지가 웹 페이지보다 훨씬 작은 경우 이미지가 반복해서 표시되는 것을 볼 수 있습니다. 원하는 경우 끌 수 있습니다.

body {
background-image: url(background.png);
background-repeat:no-repeat;
}

★ No-repeat는 이미지를 한 번만 보여줍니다.

원하는 경우 x축 또는 y축과 같은 방향을 반복할 수 있습니다. 예를 들어 background-repeat: repeat-x는 x축을 반복합니다. background-repeat: -y를 반복하면 y축이 반복됩니다.

CSS 배경 속성에 대한 자세한 정보continue reading...

CSS 배경 속성 설명