GIF 설정 ' 그래픽 교환 형식 ”는 배경 이미지로 디자인에 시각적으로 매력적인 요소를 추가합니다. GIF를 사용하면 개발자는 브랜드의 시각적 정체성을 만드는 데 도움이 되는 정보를 전달하거나 제품 또는 서비스를 강조할 수 있습니다. 그러나 개발자는 GIF 사용이 웹 페이지를 압도하거나 주요 콘텐츠에서 사용자를 산만하게 하지 않도록 해야 합니다.

이 문서는 웹 페이지에서 GIF를 배경 이미지로 설정하는 절차를 보여줍니다.

웹 페이지에서 GIF를 배경 이미지로 설정하는 방법은 무엇입니까?

GIF를 배경 이미지로 설정하면 시각적 요소를 추가하여 눈길을 끄는 요소를 만드는 데 도움이 됩니다.

GIF는 장난기나 기발한 느낌을 전달하려는 웹 사이트나 특정 제품이나 기능을 강조하려는 페이지에서 특히 유용합니다. 이를 설정하려면 배경 이미지로 다음 예를 방문하십시오.

예 1: GIF를 고정 배경으로 설정

웹 페이지의 콘텐츠를 구성하는 데 도움이 되는 HTML 요소가 ' <몸> ” 태그. 그렇기 때문에 ' 몸 ” 요소를 선택하고 CSS 속성을 적용합니다. '의 모든 포함 HTML 요소에 영향을 미칩니다. <몸> ” 태그.

예를 들어, '

' 그리고 '

” 태그는 웹 페이지의 콘텐츠로 활용됩니다. 아래 코드 스니펫을 참조하십시오.

< 몸 >
< h1 > GIF 설정 ~처럼 페이지의 배경 이미지 h1 >
< 피 > 이 GIF가 추가되었습니다 ~처럼 를 사용하여 전체 페이지의 배경 이미지 '배경 이미지' 재산. 이 기사는 Linuxhint에 의해 제공되었습니다. 피 >
몸 >

이제 '' 안에 있는 'body' HTML 요소를 선택합니다. <스타일> ” 태그 또는 별도의 “ CSS ” 파일을 사용하여 웹 페이지에 스타일을 적용합니다.

몸 {
배경 이미지: URL ( '바다.gif' ) ;
background-repeat: 반복하지 않음;
배경 크기: 표지;
패딩:50px;
글꼴 크기: x-large;
색상: 흰색;
}

위의 코드 블록에서:

• • 먼저 “ URL() ”의 경로를 저장하는 방법이 활용됩니다. GIF ” 파일. 그리고 이 메서드는 CSS ' 배경 이미지 ' 재산.
  • 다음으로 ' 반복하지 않는 '를 CSS에 대한 값으로 ' 배경 반복 ” GIF 파일의 반복 속성입니다.
  • 그런 다음 '의 값을 설정합니다. 씌우다 ” CSS에 “ 배경 크기 ” 사용 가능한 모든 공간을 커버하는 속성
  • 그런 다음 '의 값을 제공하십시오. 50픽셀 ' 그리고 ' 엑스라지 ” CSS에 “ 심 ' 그리고 ' 글꼴 크기 ” 속성, 각각. 이렇게 하면 텍스트 주위에 간격이 추가되고 글꼴 크기가 확대됩니다.

컴파일 후 웹 페이지는 다음과 같습니다.

위의 출력은 gif가 웹 페이지의 배경으로 추가되었음을 보여줍니다.

예 2: GIF를 스크롤 가능한 배경으로 설정

처음에 HTML 구조를 만들어 웹 페이지 콘텐츠를 다음과 같이 만듭니다.

< 사업부 수업 = '컨타이' >
< h1 > GIF 설정 ~처럼 페이지의 배경 이미지 h1 >
< 피 > 이 GIF가 추가되었습니다 ~처럼 를 사용하여 전체 페이지의 배경 이미지 '배경 이미지' 재산. 이 기사는 Linuxhint에 의해 제공되었습니다. 피 >
사업부 >

< 사업부 >
< h3 스타일 = '색상: 흰색;' > 외부에 작성된 내용 '사업부' 요소 h3 >
사업부 >

위의 코드에서:

• • 첫째, 학부모 “ <사업부> ” 태그는 “ 클래스와 함께 사용됩니다. 포함하다 '.
  • 다음으로 ' h1 ' 그리고 ' 피 ” HTML 요소에 더미 콘텐츠를 제공합니다.
  • 그런 다음 다른 ' <사업부> '를 활용하고

    ” 태그에 더미 데이터를 제공하여 태그를 지정합니다.

이제 다음 CSS 속성을 삽입하여 웹 페이지의 배경으로 GIF를 추가합니다.

.contai {
배경 이미지: URL ( 바다.gif ');
background-repeat: 반복하지 않음;
배경 크기: 표지;
높이: 100vh;
디스플레이: 플렉스;
정렬 항목: 중앙;
justify-content: 센터;
플렉스 방향: 열;
색상: 흰색;
글꼴 크기: 크게;
텍스트 정렬: 가운데;
패딩: 2렘;
}

위에서 사용한 코드 블록에 대한 설명:

• • 먼저 ' 이미지 경로 ”, “ 반복하지 않는 티”와 “ 씌우다 '를 CSS에 대한 값으로 ' 배경 이미지 ”, “ 배경 반복 ' 그리고 ' 배경 크기 ” 속성, 각각.
  • 다음으로 '의 값을 설정합니다. 100vh ' 그리고 ' 몸을 풀다 ” CSS에 “ 키 ' 그리고 ' 표시하다 ' 속성.
  • 그런 다음 CSS '를 활용하십시오. 색상 ”, “ 글꼴 크기 ”, “ 텍스트 정렬 ' 그리고 ' 심 ” 속성을 사용하여 콘텐츠에 스타일을 적용합니다.

컴파일 프로세스가 끝나면 웹 페이지는 다음과 같이 표시됩니다.

출력에 ' GIF ”가 전체 페이지에 배경 이미지로 삽입되었습니다.

결론

웹 페이지에서 GIF를 배경 이미지로 설정하려면 CSS ' 배경 이미지 ” 속성이 HTML에 활용됨 “ 몸 ' 요소. 'body' 요소에 적용되는 CSS 속성은 포함하는 모든 요소에 자동으로 적용됩니다. '를 설정하여 100vh ” height 속성 값으로 스크롤링 효과도 활성화할 수 있습니다. 배경 gif가 스크롤을 따라 이동할 수 있습니다. 이 기사에서는 웹 페이지에서 GIF를 배경 이미지로 설정하는 방법을 설명했습니다.