<CSS> - 배경화면

꿈꾸는 Pirate~✨·2021년 5월 13일

CSS

목록 보기

3/5

배경화면을 출력하는 코드 작성방법(예시)
background를 이미지, 그라데이션으로 출력!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배경</title>
    <style>
        body{
            /* 이미지는 화면에 앞에 오고 background는 뒤에 들어가는 것! */
            padding: 0; margin: 0; /*패딩과 마진 초기화*/
        }
           .bg1 { 
            background: url(bg1.jpg) center center repeat; 
            /*사진의 위치, repeat하면 화면을 꽉 채울만큼 반복됨!*/
            background-size: cover;/*가로 세로 길이, cover은 사진을 화면에 딱 맞춰줌!*/
            height: 100vh; /*화면의 100vh높이*/
            /* 사진이 짤림
            가로는 항상 100%가 되지만 세로는 height를 따로 채워 넣어줘야함! */
           }
           .bg2 {
            background: url(bg2.jpg) center center repeat;
            background-size: 500px 300px;
            height: 100vh; 
           }
           .bg3 {
               /* 색깔 그라데이션 속성
               to bottom(기본값) : 위에서 아래로 그라데이션
               to top : 아래에서 위로 그라데이션
               to left : 왼쪽에서 오른쪽로 그라데이션
               to right : 오른쪽에서 왼쪽로 그라데이션
               ndeg : n도의 방향으로 그라데이션
                */
            background: linear-gradient(45deg,yellow, red, green, blue);
            height: 100vh; 
           }
    </style>
</head>
<body>
  <div class="bg1"></div>
  <div class="bg2"></div>
  <div class="bg3"></div>
</body>
</html>