풀 스크린 배경 이미지는 화면 크기에 따라 커지거나 작아지기 때문에 화질이 뛰어난 이미지를 사용해야 한다 하지만 고화질의 배경이미지는 파일 용량이 커서 사이트가 느려지거나 이미지를 불러오는데 시간이 걸릴 수 있기 때문에 반드시 파일 용량을 줄이는 작업을 한 후에 풀 스크린 배경으로 적용해야 한다
웹 문서에서 이미지로 풀 스크린 배경을 만드는 가장 간단한 방법은 CSS3에 새로 추가된 background-size 속성을 사용하는 것이다
이 속성을 사용하면 배경 이미지의 크기를 다양하게 조절할 수 있다. 그 중에서 cover 값으로 배경 이미지의 너비를 브라우저 화면 가득하게 표시할 수 있다
이 CSS 속성은 <body> 태그보다는 <html> 태그에서 사용했을 때 브라우저 화면 높이에 맞게 배경이미지를 표시할 수 있다.
CSS 속성을 일일히 나열하기 어렵고 여러 브라우저를 고려하는게 번거롭다면 자바스크립트를 사용하는 방법도 있다.
특히 스마트폰이나 태블릿 등 다양한 화면 크기를 다 만족시켜야 한다면 자바스크립트가 더 편리할 것이다
대부분 jQuery 플러그인 형태로 제공하므로 소스 파일 문서 안에 포함한 후 몇 가지 메서드만 사용하면 된다
여기서는 Backstretch.js 플러그인과 슬라이드 쇼를 만들 때 유용한 Vegas 플러그인을 사용해 연습해보자
이미지로 풀 스크린 배경을 만들 때 사용하는 jQuery 플러그인 중 하나가 Backstretch.js 이다 사용방법이 편리해서 다른 플러그인에 비해 많이 쓰이고 있다
다운로드한 backstretch.min.js 파일을 웹 문서에 포함한 후 $.backstretch() 메서드를 사용하는데, 괄호 안에 배경 이미지 파일을 지정하면 된다
$.backstretch("이미지 파일");
위의 예제에서 배경 이미지 파일을 지정한 위치에 다음과 같은 형식으로 여러 개의 배경 이미지 파일과 전환 시간을 지정하면 풀 스크린 배경 이미지를 슬라이드 쇼로 보여줄 수 있다
이미지 파일은 대괄호 [] 안에 쉼표 , 로 구분해 나열해주고 화면에 표시되는 시간은 duration 속성으로, 페이드 효과 시간은 fade 속성으로 지정한다
$.backstretch(["이미지 파일1, 이미지 파일2",],{duration: 시간, fade: 시간});