HTML/CSS

XHTML

CSS - Background [배경]

WEBSP2012.02.07 16:25

조회 : 3,411

Background
Background는 컨텐츠 내용 배경에 색상 혹은 이미지 등을 넣기 위해  사용합니다.
Background를 잘만 활용 한다면 보다, 사이트를 꾸미기에 쉬워질 수 있습니다.
 
쉽게 말해서 사이트의 전체에 색상을 바꾸고 싶거나, 이미지를 바탕으로 사용하고 싶을때,
메뉴의 글자는 일반 글자이나 예쁘게 꾸미고 싶을때, Background를 사용하게 됩니다.
 
Background 속성
 
    background-color : 배경에 색상을 지정 할 때 사용합니다.
 
        background-color: #FF0000;
 
 
    background-img : 배경에 이미지를 넣을 때 사용합니다.
 
        background-img: url("이미지경로");
 
 
    background-position : 배경에 이미지를 넣었을때 이미지의 위치를 지정 할 때 사용합니다.
 
        background-position: left top;
 
left top : 왼쪽 상단 배치 (기본 값입니다.)
center top: 중앙 상단 배치 
right top : 오른쪽 상단 배치
10px 50% : 좌측에서 10px 만큼 떨어지고 상단과 하단의 정 가운데 배치 (이런 방식으로도 사용 가능합니다.)
 
 
    background-repeat : 패턴 이미지 사용시 이미지의 반복을 설정 할 수 있습니다.
 
        background-repeat: repeat;
 
repeat : 배경 전체에 패턴 이미지가 깔리게 됩니다.
repeat-x : 가로 방향으로 패턴이미지가 깔리게 됩니다.
repeat-y : 세로 방향으로 패턴이미지가 깔리게 됩니다.
no-repeat : 이미지를 반복하지 않습니다.
 
 
  background-attachment: 배경에 이미지를 넣었을때 스크롤 여부를 지정 할 수 있습니다.
 
      background-attachment: fixed;
 
fixed : 이미지를 배경에 고정하여 스크롤 이동시 아무런 영향을 받지 않도록 합니다. (항상 같은 위치에 고정됩니다.)
속성을 지정하지 않는다면, 스크롤을 따라 이미지가 위로 이동되어집니다.
 
 
TIP
Backgrond 설정역시 복잡합니다.
이 또한 축약하여 사용이 가능합니다.
부득이한 경우를 제외하고, 여러가지 속성을 번거롭게 많이 사용하는 것보다
축약하여 사용하는 것을 습관화 하시면 좋습니다.
 
    이미지 설정시
 
        background: url("이미지 경로") no-repeat left top fixed;
 
 
   배경색상 설정시
 
      background: #FF0000;
 
 
   이미지 + 배경색상 설정시
 
      background: url("이미지 경로") no-repeat left top fixed #FF0000;

0개의 댓글이 있습니다.

select count(*) as cnt from g4_login where lo_ip = '3.238.184.78'

1194 : Table 'g4_login' is marked as crashed and should be repaired

error file : /bbs/board.php