워드프레스 글 및 페이지에 각각 배경화면 넣는 방법 (How to change different backgrounds to wordpress posts and pages)

• 워드프레스의 경우 각각 페이지 또는 글마다 배경화면을 다르게 설정할 수 있습니다. 배경화면을 일괄적으로 변경하거나 또는 특정 유저에게만 보이게 할 수도 있습니다. (For WordPress, you can set different backgrounds for each page or post. You can change the wallpaper in bulk or make it visible only to specific users.)
• 워드프레스 관리자 모드로 들어가면 왼편의 Appearance – Edit CSS 메뉴로 들어가서 아래의 코드를 입력하여 변경이 가능합니다. 만약 페이지나 글의 일부 또는 전부를 변경하는 코드는 맨 밑의 코드를 참고하여 적용하면 됩니다. (Once you are in WordPress Admin Mode, you can go to the Appearance – Edit CSS menu on the left and enter the code below to make changes. If you change any part or all of the page or text, you can refer to the code at the bottom.)
• 페이지나 글의 아이디 번호는 미리보기 (Preview) 버튼에 마우스를 올려놓으면 화면의 왼편 하단에 나타납니다. (The ID number of a page or article appears at the bottom left of the screen when you move your mouse over the Preview button.)

body.page-id-YOUR PAGE NUMBER {
background: url('http://background.xxx/image.jpg')
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

body.page-id-745,
body.page-id-634,
body.postid-432,
body.postid-321
{
background-image:url('example.gif');
background-repeat:no-repeat;
}

• CSS 페이지와 글의 옵션 명령어 (Optional commands for CSS pages and posts.)
  • .page : 모든 페이지들을 일괄적으로 변경합니다. (Change all pages.)
  • .page-id-2 : 특정 페이지를(ID번호가 각각 페이지를 만들면 할당됩니다.) 변경합니다. (Change specific page. Put the ID number what you want to change.)
  • .single : 모든 글들을 일괄적으로 변경합니다.  (Change single posts.)
  • .postid-1 : 특정 글을(ID번호가 각각 글을 만들면 할당됩니다.) 변경합니다. (Change specific post. Put the ID number what you want to change.)
  • .single-format-standard : 모든 글들을 표준형식으로 변경합니다. (Change all posts with the standard post format.)
  • .logged-in : 로그인 유저에게만 변경 사항을 보이게 합니다.  (Only logged in users can see the changes.)

• CSS 배경화면 명령어 (CSS background command.)
  • background-image: url(이미지주소);
  • background-size:
    1. auto; 원본 크기 (Orginal size.)
    2. 100px; 픽셀크기 지정 (Specific size.)
    3. 50%; 비율 지정 (Specific percentage.)
    4. contain; 가로 세로 비율 유지, 이미지 중심으로 늘려줍니다. 화면 크기에 따라서 배경화면이 잘리거나 빈 공간이 생길 수 있습니다. (Maintain aspect ratio, stretch to center of image.)
    5. cover; 가로 세로 비율 유지, 요소 중심으로 커집니다. (Maintain aspect ratio, centered on elements.)
  • background-repeat:
    1. repeat; 반복 채움
    2. no-repeat; 반복 없이 하나만
    3. repeat-x; 가로만 반복 (Repeat only horizontally)
    4. repeat-y; 세로만 반복 (Repeat vertical only)
  • background-attachment:
    1. scroll; 스크롤을 움직임에 맞춰서 배경이 위로올라가거나 아래로 내려갑니다.
    2. fixed; 스크롤을 움직여도 배경이 고정됨.
  • background-position : center / left / right / top / bottom; 기준위치
    1. 0% 0%; 좌측상단 (Top left)
    2. 100% 100%; 우측하단 (Bottom right)

업데이트 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org