WordPress에 배경 이미지를 추가하는 방법

WordPress 사이트에 배경 이미지를 추가 하시겠습니까? 배경 이미지를 사용하면 웹 사이트를보다 매력적이고 즐겁게 볼 수 있습니다. 이 기사에서는 WordPress 사이트에 배경 이미지를 쉽게 추가하는 방법을 보여줍니다..


WordPress에 배경 이미지를 추가하는 방법

비디오 튜토리얼

WPBeginner 구독

동영상이 마음에 들지 않거나 지침이 더 필요한 경우 계속 읽으십시오..

방법 1. WordPress 테마 설정을 사용하여 배경 이미지 추가

대부분의 무료 및 프리미엄 WordPress 테마에는 사용자 정의 배경 지원이 제공됩니다. 이 기능을 사용하면 WordPress 사이트에 배경 이미지를 쉽게 설정할 수 있습니다.

테마가 사용자 정의 배경 기능을 지원하는 경우이 방법을 사용하여 WordPress 사이트에 배경 이미지를 추가하는 것이 좋습니다. 그러나 테마가 사용자 정의 배경 기능을 지원하지 않는 경우이 기사에서 다른 방법을 사용할 수 있습니다.

먼저 방문해야합니다 모양»사용자 정의 WordPress 관리자의 페이지. 웹 사이트의 실시간 미리보기를 보면서 다른 테마 설정을 변경할 수있는 WordPress 테마 사용자 정의 프로그램이 시작됩니다..

WordPress 테마 사용자 정의 프로그램의 배경 이미지 옵션

다음으로 ‘배경 이미지’옵션을 클릭해야합니다. 패널이 슬라이드되어 웹 사이트의 배경 이미지를 업로드하거나 선택하는 옵션이 표시됩니다.

배경 이미지 선택

계속하려면 이미지 선택 버튼을 클릭하십시오.

그러면 컴퓨터에서 이미지를 업로드 할 수있는 WordPress 미디어 업 로더 팝업이 나타납니다. 미디어 라이브러리에서 이전에 업로드 한 이미지를 선택할 수도 있습니다.

배경 이미지 업로드

그런 다음 배경으로 사용할 이미지를 업로드하거나 선택한 후 이미지 선택 버튼을 클릭해야합니다..

미디어 업 로더 팝업이 닫히고 테마 맞춤 설정 도구에서 선택한 이미지의 미리보기가 표시됩니다.

배경 이미지 설정

이미지 아래에서 배경 이미지 옵션도 볼 수 있습니다. 사전 설정에서 배경 이미지 표시 방법 (화면 채우기, 화면 맞추기, 반복 또는 사용자 정의)을 선택할 수 있습니다..

아래 화살표를 클릭하여 배경 이미지 위치를 선택할 수도 있습니다. 중앙을 클릭하면 이미지가 화면 중앙에 정렬됩니다.

‘저장’을 클릭하는 것을 잊지 마십시오 & 설정을 저장하려면 상단에 게시 ‘버튼을 클릭하십시오. 그게 전부입니다. WordPress 사이트에 배경 이미지를 성공적으로 추가했습니다..

계속해서 웹 사이트를 방문하여 실제로 작동하는지 확인하십시오..

방법 2. 플러그인을 사용하여 WordPress에 사용자 정의 배경 이미지 추가

이 방법은 훨씬 더 유연합니다. 모든 WordPress 테마와 함께 작동하며 여러 배경 이미지를 설정할 수 있습니다. 게시물, 페이지, 카테고리 또는 WordPress 사이트의 다른 섹션에 다른 배경을 설정할 수도 있습니다..

자동으로 모든 배경 이미지를 전체 화면 및 모바일 반응 형으로 만듭니다. 즉, 배경 이미지가 더 작은 장치에서 자동으로 크기가 조정됩니다..

먼저, Full Screen Background Pro 플러그인을 설치하고 활성화해야합니다. 자세한 내용은 워드 프레스 플러그인 설치 방법에 대한 단계별 가이드를 참조하십시오..

활성화되면 방문해야합니다 외관»전체 화면 BG 이미지 플러그인 설정을 구성하는 페이지.

전체 화면 배경

라이센스 키를 추가하라는 메시지가 표시됩니다. 플러그인을 구매 한 후받은 이메일이나 플러그인 웹 사이트의 계정에서이 정보를 얻을 수 있습니다..

다음으로 설정 저장 버튼을 클릭하여 변경 사항을 저장해야합니다. 이제 WordPress 사이트에 배경 이미지를 추가 할 준비가되었습니다..

플러그인 설정 페이지에서 ‘새 이미지 추가’버튼을 클릭하십시오. 배경 이미지 업로드 화면으로 이동합니다.

새로운 배경 이미지 추가

이미지 선택 버튼을 클릭하여 이미지를 업로드하거나 선택하십시오. 이미지를 선택하자마자 화면에서 이미지의 실시간 미리보기를 볼 수 있습니다.

다음으로이 이미지의 이름을 제공해야합니다. 이 이름은 내부적으로 사용되므로 여기에서 무엇이든 사용할 수 있습니다.

마지막으로이 이미지를 배경 페이지로 사용할 위치를 선택해야합니다. Full Screen Background Pro를 사용하면 이미지를 전 세계적으로 배경으로 설정하거나 범주, 아카이브, 첫 페이지, 블로그 페이지 등과 같은 웹 사이트의 다른 섹션에서 선택할 수 있습니다.

배경 이미지를 저장하려면 이미지 저장 버튼을 클릭하는 것을 잊지 마십시오.

방문하여 원하는만큼 이미지를 추가 할 수 있습니다 외관»전체 화면 BG 이미지 페이지.

하나 이상의 이미지를 전체적으로 사용하도록 설정하면 플러그인이 자동으로 배경 이미지를 슬라이드 쇼로 표시하기 시작합니다.

이미지가 사라지는 데 걸리는 시간과 새로운 배경 이미지가 사라지는 데 걸리는 시간을 조정할 수 있습니다.

백그라운드 페이드 인 및 페이드 아웃 설정

여기에 입력하는 시간은 밀리 초입니다. 20 초 후에 배경 이미지가 페이드 아웃되도록하려면 20000을 입력해야합니다..

설정 저장 버튼을 클릭하여 변경 사항을 저장하는 것을 잊지 마십시오.

개별 게시물, 페이지, 카테고리 등에 대한 배경 이미지 설정

전체 화면 Background Pro를 사용하면 단일 게시물, 페이지, 카테고리, 태그 등에 대한 배경 이미지를 설정할 수도 있습니다..

다른 배경 이미지를 표시하려는 게시물 / 페이지를 편집하십시오. 게시물 수정 화면에서 게시물 편집기 아래에 새로운 ‘전체 화면 배경 이미지’상자가 나타납니다..

단일 게시물 또는 페이지의 배경 이미지 추가

특정 카테고리에 대한 배경 이미지를 사용하려면 다음을 방문해야합니다. 외관»전체 화면 BG 이미지 페이지에서‘새 이미지 추가’버튼을 클릭하십시오.

이미지를 업로드 한 후 배경 이미지를 표시 할 컨텍스트로 ‘카테고리’를 선택할 수 있습니다..

특정 카테고리에 대한 배경 이미지 설정

이제 이미지를 표시 할 특정 카테고리 ID 또는 슬러그를 입력하십시오. WordPress에서 카테고리 ID를 찾는 방법에 대한 가이드를 참조하십시오.

설정을 저장하기 위해 이미지를 저장하는 것을 잊지 마십시오.

방법 3. CSS를 사용하여 WordPress에 사용자 지정 배경 이미지 추가

기본적으로 WordPress는 WordPress 사이트의 여러 HTML 클래스에 여러 CSS 클래스를 추가합니다. 이러한 WordPress 생성 CSS 클래스를 사용하여 개별 게시물, 카테고리, 작성자 및 기타 페이지에 사용자 정의 배경 이미지를 쉽게 추가 할 수 있습니다..

예를 들어 웹 사이트에 TV라는 카테고리가있는 경우 누군가가 TV 카테고리 페이지를 볼 때 WordPress는 자동으로 이러한 CSS 클래스를 본문 태그에 추가합니다..

검사 도구를 사용하여 WordPress에서 body 태그에 추가 한 CSS 클래스를 정확하게 확인할 수 있습니다.

검사 도구를 사용하여 WordPress에서 추가 한 클래스를 봅니다.

category-tv 또는 category-4 CSS 클래스를 사용하여이 범주 페이지의 스타일을 다르게 지정할 수 있습니다.

카테고리 보관 페이지에 맞춤 배경 이미지를 추가하겠습니다. 이 사용자 정의 CSS를 테마에 추가해야합니다.

body.category-tv {
배경 이미지 : url ("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg");
배경 위치 : 중심 센터;
배경 크기 : 덮개;
배경 반복 : 반복 없음;
백그라운드 부착 : 고정;
}

배경 이미지 URL과 카테고리 클래스를 자신의 카테고리로 바꾸는 것을 잊지 마십시오.

개별 게시물 및 페이지에 사용자 정의 배경을 추가 할 수도 있습니다. WordPress는 본문 태그에 게시물 또는 페이지 ID가있는 CSS 클래스를 추가합니다. 동일한 CSS 코드를 사용할 수 있습니다. .category-tv를 게시물 별 CSS 클래스로 바꾸십시오..

이 기사가 WordPress에 배경 이미지를 추가하는 방법을 배우는 데 도움이 되었기를 바랍니다. WordPress 함수 파일에 대한 매우 유용한 트릭 목록을 볼 수도 있습니다..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me