적용화면


샘플 이미지: http://www.hasselblad.com/kr

Source

HTML

<div id="backGround"></div>

CSS

#backGround { 
	margin:0 auto;
	width:100%;
	height:450px;
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:100% 100%;
}

※ CSS 소스에서 width:100%를 필자의 페이지 경우 이 페이지의 부모 영역에 이미 width가 값을 넣어났기 때문이다.

JavaScript

var bg = new Array();
bg[bg.length] = 'http://static.hasselblad.com/2016/10/Hans-X1D-sample1.jpg';
bg[bg.length] = 'http://static.hasselblad.com/2016/10/anders-X1D-sample1.jpg';
bg[bg.length] = 'http://static.hasselblad.com/2016/10/Tom-Oldham-H6D-50c-Sample1.jpg';

var obj = document.getElementById('backGround');
var size = Math.floor(Math.random()*(bg.length));
j = (isNaN(size)) ? 0 : size;
obj.style.backgroundImage = 'url('+ bg[size] + ')';