CSS – Background 관련속성

미분류

[이미지다운]

Background

  • 엘리먼트 영역에 색상, 이미지를 채우는 속성
background-color:#000; (배경색)
background-image:url(http://aaa.gif); (배경 이미지)
background-repeat:no-repeat; (배경 이미지 반복여부, no-repeat:반복안함, repeat-x:가로로 반복, repeat-y:세로로 반복)
background-position:0 25px; (배경 이미지 위치지정, left, top 기준)
background:#000 url(http://aaa.gif) no-repeat 0 25px; (축약형)
background:red url(daum.gif) repeat-y left top;
background:url(daum.gif) repeat-x 0px 0px;

배경색 : background-color

body {
  background-color: #ff0;
}

배경이미지 : background-image

body {
  background-image: url("gradient_bg.png");
}

배경이미지 반복 수정 : background-repeat

  • repeat : 가로,세로 축 반복(기본값)
  • repeat-x : 가로 축 반복
  • repeat-y : 세로 축 반복
  • no-repeat : 반복없음
body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;  
}

배경이미지 반복 수정 : background-position

  • background-position : 가로위치   세로위치  ;
  • 가로위치  값 : left, right, center, px단위, %단위로 지정 가능
  • 세로위치 값 :  top, bottom, px단위, %단위로 지정 가능
  • 예 ) background-position:50% 50%;  –> 이미지 가로축 가운데, 세로운 가운데.
body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
    background-position: right top;  
}

배경이미지 비고정/고정 : background-attachment

  • background-attachment : scroll(기본값)  –>배경이미지 비고정.
  • background-attachment : fixed  –> 배경이미지 고정
body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
    background-position: right top;  
    background-attachment: fixed; 
}

배경속성 축약형

body {
    background: #ffffff url("gradient_bg.png") no-repeat right top;
}

CSS3 – Background size 속성 추가

배경 사이즈 : Background Size

  • background-size: auto; (이미지비율 유지)
    – 이미지 원본사이즈 그대로 보여짐
  • background-size: 100%; (이미지비율 유지)
    – 값이 하나만 있을경우 width 값으로 인식.height는 auto로 적용됨.
  • background-size: 50% 50%; (이미지비율 유지 안됨)
    – 지정한 값대로 width는 50%, height는 50%로 나타남.
  • background-size: contain; (이미지비율 유지)
    – 박스의 너비나 높이 중에 작은값에 100%를 맞춤.
    – 이미지 비율을 유지하고, 이미지가 어느쪽도 잘려나가지 않는 최선의 상태로 이미지를 꽉차게 보여줌.
    – 이미지는 잘려보이지 않지만 공백이 보일수 있음.
  • background-size: cover; (이미지비율 유지)
    – 박스의 너비나 높이 중에 큰값에 100%를 맞춤.
    – 박스를 공백없이 이미지로 꽉 채우고 싶을때 사용.
    – 이미지 비율을 유지하기때문에, 이미지의 일부는 잘려서 안보일수 있음 .
#div1 {
    background: url(img_flower.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
#div2 {
    background: url(img_flower.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

img_flower img_flwr