웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] 하나의 배경이미지를 전체화면에 맞게 출력하기 본문

웹프로그램밍 자료실/HTML 자료

[해피CGI][cgimall] 하나의 배경이미지를 전체화면에 맞게 출력하기

해피CGI윤실장 2017. 6. 28. 09:41

한개의 배경이미지로 브라우저 화면의 크기에 맞게 꽉차서 출력이 되는 css 입니다.




html {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


하나의 배경이미지를 브라우저 전체화면에 꽉채우고자 할때 사용.
배경이미지의 중앙이 브라우저의 중앙에 출력합니다.
배경이미지는 큰이미지가 필요합니다.
배경 이미지의 가로, 세로 길이 모두 엘리먼트보다 크다라는 조건하에 가능한한 배경 이미지를 작게 조정합니다
가로/세로 비율은 유지됩니다.
사파리, 크롬, 익스9 버전 이상에서 확인하였습니다.





 

 

홈페이지바로가기  

저작자표시

'웹프로그램밍 자료실 > HTML 자료' 카테고리의 다른 글

[해피CGI][cgimall] jQuery parallax scrolling  (0) 2017.07.04
[해피CGI][cgimall] CSS Transforms 과 자바스크립트를 이용한 원 형태의 네비게이션  (0) 2017.07.04
[해피CGI][cgimall] CSS3 를 이용한 다양한 아이콘효과를 확인해보세요  (0) 2017.06.28
[해피CGI][cgimall] html5 기초부터 배울수 있는 html5-tutorials  (0) 2017.06.28
[해피CGI][cgimall] 한줄이상 콘텐츠에 ellipsis 적용이 가능한 라이브러리입니다^^  (0) 2017.06.27
공유하기 링크
'웹프로그램밍 자료실/HTML 자료' Related Articles more
Comments