【CSS/homepage】background-repeat 배경 설정《2》

배경 이미지의 반복의 표시 방법을 지정하는 속성입니다.

no-repeat

background-repeat: no-repeat;　/* 한 번만 표시*/

body {
    background-image: url("background_sample.gif");
    background-repeat: no-repeat;
}

repeat

background-repeat: repeat; /*반복해서 표시(초기 값) */
background-repeat: repeat no-repeat; /*같은 결과를 표시.*/

body {
    background-image: url("background_sample.gif");
    background-repeat: repeat;
}

스폰서 링크

repeat-x

background-repeat: repeat-x;　/*배경 이미지를 수평 방향으로 일렬로 표시.*/

body {
    background-image: url("background_sample.gif");
    background-repeat: repeat-x;
}

repeat-y

background-repeat: repeat-y;　/*배경 이미지를 수직 방향으로 일렬로 표시.*/
background-repeat: no-repeat repeat;　/*같은 결과를 표시.*/

body {
    background-image: url("background_sample.gif");
    background-repeat: repeat-y;
}

space

background-repeat: space;　/* 배경 이미지는 지정된 방향으로 잘림 없이 표시 영역 전체에 반복됩니다. */

body {
    background-image: url("background_sample.gif");
    background-repeat: space;
}

repeat-x,repeat-y

background-repeat: repeat-x,repeat-y;　/*repeat-x+repeat-yの表示結果。*/

body {
   background-image:url("images/background_sample2.gif"),url("images/background_sample3.gif");
   background-repeat:repeat-x,repeat-y;
}

background-position	center：중앙에 표시합니다. left：왼쪽에 표시합니다. right：오른쪽에 표시합니다. top：상단에 표시합니다. bottom：하단에 표시합니다. percentage(%)：% 비율로 이미지 위치를 지정합니다.

background-position

*center：중앙에 표시합니다.

*left：왼쪽에 표시합니다.

*right：오른쪽에 표시합니다.

*top：상단에 표시합니다.

*bottom：하단에 표시합니다.

*percentage(%)：% 비율로 이미지 위치를 지정합니다.

Prev 12Next

스폰서 링크