웹 사이트에 WordPress 배경 이미지를 올바르게 추가하는 방법은 무엇입니까?

게시 됨: 2022-01-06

웹사이트에 WordPress 배경 이미지를 추가하는 것이 쉽습니까? 테마가 지원하지 않는 한 대답은 대부분 '예'입니다.

사실, 요즘 많은 WordPress 테마는 기존 배경 이미지를 추가하고 변경할 수 있는 손쉬운 방법을 제공했습니다.

CSS 또는 플러그인을 사용하여 WordPress 배경 이미지를 변경할 수도 있습니다. 이 플러그인은 페이지, 게시물 및 카테고리에 배경 이미지를 설정하는 옵션을 엽니다.

이 기사에서는 눈길을 끄는 모양과 느낌으로 웹 사이트를 돋보이게 만들기 위해 위의 모든 작업을 수행하는 방법을 보여줍니다.

WordPress 배경 이미지 는 무엇입니까 ?

워드프레스 배경 이미지는 메인 콘텐츠 뒤에 적용된 그림입니다. 영웅 이미지처럼 웹사이트의 주요 초점이 되는 대신, 종종 더 미묘하고 웹 페이지의 다른 콘텐츠를 보완합니다.

wordpress-배경 이미지-1

더 나은 읽기 경험을 제공하는 웹 페이지를 만드는 데 도움이 될 뿐만 아니라 WP 배경 이미지는 웹사이트를 경쟁업체와 차별화하는 다양한 디자인 가능성을 제공합니다.

경쟁자와 다르다는 것은 웹사이트 디자인에 더 많은 노력을 기울임으로써 브랜드 인지도를 높이는 것을 의미합니다. 이는 항상 쉬운 일이 아닙니다. 이 경우 디지털 에이전시에 전문적인 웹 디자인 서비스를 요청할 수 있습니다.

그런데 왜 배경을 바꾸려 합니까? 글쎄, 기본 것은 당신에게 어필하지 않거나 당신의 브랜드와 닮지 않을 수 있습니다. 아니면 이미지가 아니라 단색일 수도 있습니다. 또는 처음에는 기존 것을 좋아했지만 지금은 지루해졌습니다.

이유가 무엇이든 변경하여 실험해 보겠습니다.

기본 WordPress 사용자 지정 프로그램을 사용하여 WordPress 배경 이미지 추가

WordPress 테마는 일반적으로 배경에서 색상이나 이미지를 쉽게 사용할 수 있는 방법을 제공합니다. 대부분의 사람들은 사이트의 브랜드와 취향에 더 잘 맞는 배경색을 변경합니다.

이 가이드에서는 전자 상거래 사이트를 위한 환상적인 테마인 Woostify를 사용할 것입니다. 테마에 따라 방법이 약간 다를 수 있습니다.

  1. WordPress 대시보드에서 모양 > 배경 화면/ 배경 또는 모양 > 사용자 정의 > 배경 화면 으로 이동합니다.
wordpress-배경 이미지-2
  1. 이미지 선택 버튼을 클릭하여 미디어 라이브러리를 엽니다.
wordpress-배경 이미지-3
  1. 원하는 이미지를 선택하세요. 컴퓨터에서 업로드하거나 미디어 라이브러리에서 기존 것을 선택할 수 있습니다.
wordpress-배경 이미지-4
  1. 마음에 들면 이미지 선택 버튼을 클릭하십시오.
  2. 미리보기에 표시되는 내용이 마음에 들면 게시 버튼을 클릭합니다. 그리고 그게 다야!
워드프레스-배경-이미지-5

또한 WordPress는 간단한 배경 이미지 편집 도구를 제공합니다. 어떤 크기, 위치 등이 가장 좋은지 실험해 볼 수 있습니다.

wordpress-배경 이미지-6

어떤 것에 얽매이는 것에 대해 걱정하지 마십시오. 언제든지 설정으로 돌아가서 배경(및 관련 옵션)을 쉽게 변경할 수 있습니다.

Elementor 페이지 빌더를 사용하여 게시물/페이지에 WordPress 배경 이미지 추가

Elementor는 웹사이트 제작 속도를 극적으로 높이는 널리 퍼진 페이지 빌더입니다. WordPress 배경 이미지를 추가하는 데 사용할 수 있는 무료 플러그인을 제공합니다.

  1. 시작하려면 Elementor 플러그인을 설치하고 활성화해야 합니다.
  2. 먼저 원하는 게시물 또는 페이지로 이동합니다. 기본 WordPress 페이지 편집기에서 Elementor로 편집 버튼을 클릭합니다.
워드프레스-배경-이미지-7

Elementor 편집기가 열립니다. 왼쪽에 게시물/페이지를 만들고 편집하기 위한 모든 끌어서 놓기 블록이 나열된 메뉴가 표시됩니다.

  1. 페이지 빌더의 왼쪽 하단 모서리에 있는 작은 설정 아이콘을 클릭합니다.
wordpress-배경 이미지-8
  1. 그런 다음 스타일 탭을 선택합니다.
  1. 그런 다음 페인트 브러시 아이콘을 클릭하여 WordPress 배경 이미지 를 추가합니다.
  1. 그런 다음 이미지 선택 버튼을 클릭하여 미디어 라이브러리를 불러옵니다.
wordpress-배경 이미지-9
  1. 원하는 이미지를 선택하세요. 컴퓨터에서 업로드하거나 미디어 라이브러리에서 기존 것을 선택할 수 있습니다.
  1. 그런 다음 오른쪽 하단 모서리에 있는 '미디어 삽입' 버튼을 클릭합니다.

이제 선택한 배경 이미지가 오른쪽 미리보기에 나타나야 합니다. 이미지 및 텍스트와 같은 항목이 올바르게 표시되도록 다른 콘텐츠를 조정해야 할 수도 있습니다.

  1. 모든 변경 사항을 저장하고 게시물/페이지를 업데이트하려면 '업데이트' 버튼을 누르십시오.
wordpress-배경 이미지-10

또한 Elementor는 Position, Attachment, Repeat 등과 같은 WordPress 배경 이미지에 대한 일부 조정 기능을 제공합니다. 자유롭게 실험하여 최상의 배경을 알아내십시오.

플러그인을 사용하여 WordPress 배경 이미지 추가

WordPress 배경 이미지 를 추가하는 작업을 수행할 수 있는 몇 가지 무료이지만 우수한 플러그인이 있습니다. 예를 들어 간단한 전체 화면 배경 이미지, 고급 WordPress 배경, 전체 배경 관리자 등

전체 사이트에 대한 WordPress 배경 이미지 추가

이 가이드에서는 단순 전체 화면 배경 이미지를 사용하므로 이름이 간단합니다.

이 플러그인은 웹사이트에 대한 WordPress 배경 이미지의 간단한 설치 및 설정을 제공합니다. 브라우저로 이미지의 크기를 자동으로 조정합니다. 따라서 방문자가 사용하는 장치에 관계없이 항상 화면을 채웁니다.

실행하려면 몇 가지 간단한 단계만 거치면 됩니다. 추가 기능을 추가하는 유료 버전이 있습니다. 그러나 무료는 우리에게 필요한 전부입니다.

  1. 단순 화면 배경 이미지 플러그인을 설치하고 활성화합니다.
  2. WordPress 대시보드에서 모양 > 전체 화면 BG 이미지 로 이동합니다.
wordpress-배경 이미지-11
  1. 이미지 선택 버튼을 클릭하여 미디어 라이브러리를 엽니다.
wordpress-배경 이미지-13
  1. 원하는 이미지를 선택하세요. 컴퓨터에서 업로드하거나 미디어 라이브러리에서 기존 것을 선택할 수 있습니다.
워드프레스-배경-이미지-14
  1. 마음에 들면 이미지 선택 버튼을 클릭하십시오.
  2. 마지막으로 '옵션 저장' 버튼을 클릭하고 웹사이트를 확인하십시오. 이제 이미지가 전체 화면 WordPress 배경 이미지로 사이트에 표시됩니다.
워드프레스-배경-이미지-15

WordPress 배경 이미지에 대한 플러그인 설정은 기본 WordPress 사용자 정의 프로그램보다 우선합니다. 이것은 어떤 종류의 나쁜 것이 아니라 단지 염두에 두어야 할 사항입니다.

특정 페이지 /게시물 에 WordPress 배경 이미지 추가

이 가이드에서는 위에서 언급한 고급 WordPress 배경 플러그인을 사용합니다.

이 플러그인을 사용하면 구텐베르크 블록을 사용하여 배경을 추가할 수 있습니다. 색상, 이미지 또는 비디오를 WordPress 배경으로 설정할 수 있습니다. 그들은 모두 모바일 장치에서 볼 수 있습니다. 또한 WordPress 배경 이미지 및 비디오에 시차 효과를 추가할 수 있습니다.

이 경우 콘텐츠 영역, 특히 게시물/페이지에 정적 배경 이미지만 추가합니다.

이것은 구텐베르크 블록에서 작동하므로 필요한 경우 클래식 편집기 모드에서 전환해야 합니다.

  1. 플러그인을 설치하고 활성화합니다.
  2. 기존 게시물/페이지를 열거나 새 게시물/페이지를 만듭니다.
  3. 왼쪽 상단 모서리에 있는 더하기 버튼을 클릭합니다. 그런 다음 디자인 섹션으로 스크롤하여 AWB 블록을 선택합니다. 상단 아이콘 표시줄과 사이드 메뉴 열이 블록 옆에 나타납니다.
워드프레스-배경-이미지-15
  1. 측면 열에서 이미지 버튼을 클릭합니다. 그런 다음 그 아래에 있는 이미지 선택 버튼을 클릭하여 미디어 라이브러리를 엽니다.
wordpress-배경 이미지-16
  1. 원하는 이미지를 선택하세요. 그런 다음 선택 버튼을 클릭합니다. 완료되면 배경 이미지가 표시됩니다.
워드프레스-배경-이미지-18
  1. 상단 아이콘 바에서 햄버거 모양 아이콘을 클릭합니다. 그런 다음 전체 너비 옵션을 선택하여 전체 너비 를 덮습니다. 이것은 전적으로 선택 사항입니다.
wordpress-배경 이미지-19

측면 열에서 WordPress 배경 이미지의 크기, 간격, 위치 등을 변경할 수 있습니다. 자유롭게 실험해 보세요.

wordpress-배경 이미지-20

이제 블록 내부에 콘텐츠를 추가하는 일만 남았습니다. 기존 게시물/페이지를 편집하는 경우 콘텐츠를 잘라내어 블록에 붙여넣으면 됩니다.

결과에 만족하면 게시물/페이지를 저장하는 것을 잊지 마십시오.

CSS 를 사용 하여 WordPress 배경 이미지 추가

이제 CSS 를 사용하여 WordPress 배경 이미지를 변경 하는 방법을 살펴보겠습니다. 이것은 WordPress 사용자 정의 프로그램을 사용하여 전체 사이트 또는 특정 범주에 대해 수행할 수 있습니다.

  1. WordPress 대시보드에서 모양 > 사용자 지정 으로 이동하여 WordPress 사용자 지정 프로그램에 액세스합니다.
wordpress-배경 이미지-21
  1. 아래로 스크롤하여 추가 CSS 섹션을 클릭합니다.
wordpress-배경 이미지-22
  1. 아래의 적절한 코드를 복사하여 CSS 필드에 붙여넣습니다.
wordpress-배경 이미지-23

전체 사이트에 대한 WordPress 배경 이미지 추가

 body { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

자리 표시자 텍스트 'imageURL'을 실제 이미지 파일 URL로 바꿔야 합니다. 이를 보려면 미디어 라이브러리에서 원하는 이미지를 선택하여 이미지 정보를 봅니다.

CSS를 알고 있다면 원하는 대로 자유롭게 조정할 수 있습니다.

wordpress-배경 이미지-24

특정 카테고리 페이지 에 WordPress 배경 이미지 추가

 body.category-categoryid { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

자리 표시자 텍스트 'imageURL'을 실제 이미지 파일 URL로, 'categoryid'를 적절한 카테고리 이름으로 교체해야 합니다.

카테고리 ID를 알아보려면 아래 지침을 따르세요.

  1. WordPress 대시보드에서 게시물 > 카테고리 로 이동합니다.
wordpress-배경 이미지-25
  1. 참조하려는 범주의 편집 텍스트 위로 마우스를 가져갑니다. 페이지 왼쪽 하단에 카테고리 ID가 표시된 URL이 표시됩니다.
wordpress-배경 이미지-26

WordPress에서 배경 이미지를 사용하기 위한 모범 사례

WordPress에서 사용자 정의 배경 이미지를 설정하는 것은 쉬운 작업처럼 보입니다. 예! 대부분의 경우 사실이지만 항상 그런 것은 아닙니다.

따라서 가능한 한 많은 문제를 제거하기 위해 WordPress 배경 이미지 모범 사례를 따르는 것이 좋습니다.

WordPress 테마를 사용하기 전에 배경 이미지 지원 확인

불행히도 모든 WordPress 테마가 사용자 정의 배경 이미지를 지원하는 것은 아닙니다. 일반적으로 배경이 테마의 전체 디자인과 일치하지 않기 때문입니다. 따라서 개발자는 완전히 끄기로 결정했습니다.

따라서 새 테마를 다운로드할 때 기능 목록을 확인해야 합니다. 특히 프리미엄 테마에 대해 비용을 지불할 계획이라면 더욱 그렇습니다. 테마를 판매하는 많은 웹 사이트는 WordPress 테마가 배경 이미지를 지원하는지 여부에 대한 정보를 제공합니다.

wordpress-배경 이미지-27

고품질 이미지 유지

의도한 배경 이미지의 해상도는 종종 프레젠테이션을 만들거나 끊습니다. 휴대폰으로 찍은 사진이 배경으로 충분하다고 생각할 수도 있습니다. 그러나 훨씬 더 높은 품질이 필요합니다.

Shutterstock과 같은 사이트에서 로열티 프리 사진에 대해 비용을 지불할 수 있습니다. 이러한 사이트에는 큰 배경 이미지로 업로드할 수 있는 전문가 수준의 이미지가 있는 경우가 많습니다. 무료 스톡 이미지 사이트에서도 많이 찾을 수 있습니다.

배경 이미지의 대부분이 콘텐츠로 덮여 있기 때문에 WordPress 사이트에서 배경 이미지가 완전히 보이지 않을 수 있습니다. 그러나 여전히 전체 화면에 표시됩니다. 따라서 고품질 이미지를 사용하지 않으면 늘어난 배경이 보일 위험이 있습니다.

배경 이미지 최적화

WordPress 사이트에 업로드된 모든 사진과 마찬가지로 게시하기 전에 배경 이미지를 최적화해야 합니다.

이는 사이트 전체의 여러 페이지에 자주 표시되는 배경 이미지의 경우 특히 중요합니다. 또한 사진이 크고 화면 공간을 많이 차지합니다. 또한 큰 이미지는 서버에 상당한 부담을 줍니다. 따라서 사이트가 빠르게 로드되도록 배경 이미지를 최적화해야 합니다.

여기에는 두 가지 옵션이 있습니다.

  • 배경 이미지(및 모든 웹사이트 사진)를 서버에 업로드하기 전에 최적화하십시오. Photoshop, GIMP 및 Pixlr과 같은 도구를 사용하여 이 수동 프로세스를 완료할 수 있습니다.
  • 업로드 시 이미지의 크기를 조정하고 축소하는 WordPress 플러그인을 설치하여 최적화 프로세스를 자동화하십시오.

마지막 생각들

웹사이트에 WordPress 배경 이미지를 추가하는 것은 작은 일처럼 보일 수 있습니다. 하지만 잘하면 엄청난 효과를 볼 수 있습니다.

또한 온라인 상태를 최신 상태로 유지하는 데 도움이 될 수 있습니다. 따라서 방문자는 동일한 사진을 계속해서 보고도 지루하지 않습니다.

이상적으로는 의도한 대로 작동하도록 특별히 설계된 WordPress 사용자 지정 프로그램을 사용하여 가능한 한 배경 이미지를 추가하는 것이 좋습니다.

그러나 위에 표시된 것처럼 WordPress 배경 이미지를 추가하고 변경할 수 있는 다른 옵션도 있습니다.

이제 웹 사이트 배경으로 창의력을 발휘하여 방문자를 시각적으로 참여시키십시오.