수업소개
여기서는 랜덤하게 배경 이미지를 설정하는 방법에 대해서 알아보겠습니다.
사용기술
- html
- css
주요개념
- background image, size (css)
참고
- https://source.unsplash.com/ - https://source.unsplash.com/random
- http://loremflickr.com/ - http://loremflickr.com/1280/720
- http://pipsum.com/ - http://pipsum.com/1280x720.jpg
- https://unsplash.it/ - https://unsplash.it/1280/?random
미리보기
수업
예제
<!doctype html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200" rel="stylesheet">
<style>
body{
background-image: url('https://source.unsplash.com/category/nature/1600x900');
background-size: cover;
min-height:100vh;
margin:0;
display: flex;
justify-content: center;
align-items: center;
}
h1{
background-color: rgba(255, 255, 255, 0.3);
padding:0.3rem;
color:rgb(0, 0, 0);
font-family: 'Source Sans Pro', sans-serif;
font-weight: 200;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor.</h1>
</body>
</html>
