RadarURL

logo

  • 홈으로
  • 로그인
  • 회원가입
  • 화면축소
  • 화면확대
2021년 01월 16일
  • 포토누리
  • 제작의뢰
  • 포트폴리오
잡다한몽상백서 메인배너
로그인
강좌
2014.05.15 14:29

백그라운드 채우기

조회 수 7 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print
Extra Form
div style="

width: 296px; 

height: 152px; 

background-image: url('장나라'); 

-ms-behavior: url('/css/backgroundsize.min.htc'); 

background-size: cover; 

background-repeat: no-repeat;

"></div>


?
  • profile
    똑띠 2016.06.14 09:44
    background-size 속성





    background-size: auto; ​



    ​원래 이미지 사이즈대로 사용됨.

    박스에 크기를 주더라도 원래 이미지 사이즈대로 나타남.



    background-size: 500px;



    값이 하나만 있을경우 width 값으로 인식됨. height는 비율에 맞추어 auto로 나타남.



    background-size: 500px 300px;



    지정한 값대로 width는 500픽셀, height는 300픽셀로 나타남.



    background-size: 50% auto;



    박스값의 50%의 너비로 지정됨. 높이는 auto로 나타남.



    background-size: 100%;



    이미지의 너비와 높이비율을 박스 크기에 따라 100%로 맞춰줌



    background-size: contain;



    이미지의 너비와 높이 비율은 유지됨.

    너비나 높이 중에 작은값을 배경에 맞춤.



    background-size: cover;



    이미지의 너비와 높이 비율은 유지됨.

    너비나 높이 중에 큰값을 배경에 맞춤.

    [출처] [CSS] background-size 정리|작성자 시에나

List of Articles
번호 분류 제목 조회 수 날짜
공지 css 관련 참고 사이트를 소개 합니다. 7045 2009.03.01
공지 [작성중] CSS강좌 목차 1 13474 2009.05.21
» 강좌 백그라운드 채우기 1 7 2014.05.15
45 div 떠 있는 형태로 고정 (하단bar) 17 2014.03.18
44 강좌 href 속성에서 _blank 적용시 title에 새창으로 이동 명시 3929 2013.08.09
43 vertical-align:middle; 7127 2009.10.06
42 배경을 고정할려면 4527 2009.07.16
41 배경 png 투명하게 처리하기 7220 2009.05.05
40 css 선택자 7095 2009.04.20
39 ul,li,ol에 대한 이해 10591 2009.03.02
38 css !important 6627 2009.03.01
37 css clear : none | left | right | both 8794 2009.03.01
36 css style.display style.visibility 10728 2009.03.01
35 css font 속성 7361 2009.03.01
34 css background 속성 14474 2009.03.01
33 css text 속성 6628 2009.03.01
32 css white-space 6544 2009.03.01
31 CSS(Cascading Style Sheet)란? 5692 2009.03.01
30 list-style 6940 2009.03.01
29 css position 속성 11622 2009.03.01
28 span, div, filedset 10716 2009.03.01
27 ul , li 속성에 대해서 13114 2009.03.01
목록
Board Pagination ‹ Prev 1 2 3 4 Next ›
/ 4

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

  • Designed by jobdahan.net