CSS3 - Background

이소라·2021년 6월 24일
0

1. Background-image

  • 요쇼에 배경 이미지를 지정
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      	background-image: url("http://poiemaweb.com/img/bg/dot.png");
      }
    </style>
  </head>
  <body>
    <h3>Background image</h3>
  </body>
</html>

2. background-repeat

  • 배경 이미지의 반복을 지정

  • 수직, 수평 또는 수직과 수평 모두의 반복을 지정 가능

  • background-repeat: repeat(기본값);
    - 설정된 이미지가 화면보다 작으면, 자동으로 이미지가 반복 출력됨

  • background-repeat: repeat-x;
    - x축으로만 배경 이미지 반복

  • background-repeat: repeat-y;
    - y축으로만 배경 이미지 반복

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      	background-image: url("http://poiemaweb.com/img/bg/dot.png");
      	background-repeat: repeat-x;
      }
    </style>
  </head>
  <body>
    <h3>Background-repeat: repeat-x;</h3>
  </body>
</html>

  • 반복 출력을 멈추고 싶은 경우,
    background-repeat: no-repeat;
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      	background-image: url("http://poiemaweb.com/img/bg/dot.png");
      	background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h3>Background-repeat: no-repeat;</h3>
  </body>
</html>

  • background-image에 여러 개의 이미지를 설정한 경우, 먼저 설정된 이미지가 전면에 출력됨
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      	background-image: url("http://poiemaweb.com/img/bg/dot.png"), url("http://poiemaweb.com/img/bg/paper.gif");
      	background-repeat: no-repeat, repeat;
      }
    </style>
  </head>
  <body>
    <h3>Background-repeat: no-repeat, repeat;</h3>
  </body>
</html>

3. background-size

  • 배경 이미지의 사이즈를 지정

  • 배경 이미지의 고유 비율을 유지하기 때문에 설정에 따라 이미지의 일부가 안 보일 수 있음

  • property 값은 px, %, cover, contain 등을 사용

  • 배경 이미지의 width, height를 모두 설정 가능

    • 첫 번째 값은 width, 두 번째 값은 height를 의미
    • 하나의 값만 지정한 경우, 지정한 값은 width를 의미하게 되며 height은 auto로 지정됨
    • width, height은 공백으로 구분해야함 (쉼표로 구분하면 다른 배경 이미지의 너비값으로 인식)

  • px 값 지정
    - 배경 이미지 크기가 지정된 px값 그대로 설정됨
    - 첫 번째 값은 width, 두 번째 값은 height를 의미
.bg {
	background-size: 700px 500px;
}
  • % 값 지정
    - 배경 이미지 크기가 지정된 %값에 비례하여 설정됨
    - 첫 번째 값은 width, 두 번째 값은 height를 의미
.bg {
	background-size: 100% 100%;
}
  • cover 지정
    - 배경 이미지의 크기 비율을 유지한 상태에서 부모 요소의 width, height 중 큰 값에 배경이미지를 맞춤
    - 이미지의 일부가 보이지 않을 수 있음
.bg {
	background-size: cover;
}
  • contain 지정
    - 배경 이미지의 크기 비율을 유지한 상태에서 부모 요소의 영역에 배경 이미지가 보이지 않는 부분 없이 전체가 들어갈 수 있도록 이미지 스케일을 조정함
.bg {
	background-size: contain;
}

4. background-attachment

  • 일반적으로 화면을 스크롤하면 배경 이미지도 스크롤됨
  • 화면이 스크롤 되더라도 배경 이미지는 스크롤 되지 않게 하려면, background-attachment: fixed 지정해야함
<!DOCTYPE html>
<html>
  <head>
    <style>
      *, *:after, *:before {
      	margin: 0;
      	padding: 0;
      	box-sizing: border-box;
      }
      
      html, body {
      	width: 100%;
      	height: 100%;
      }
      
      .bg-wrap {
      	/* bg-wrap이 page-wrap보다 작은 경우, page-wrap이 가리는 문제 해결*/
      	min-height: 600px;
      	height: 100%;
      	background-size: cover;
      	background-position: center;
      	background-repeat: no-repeat;
      	overflow: auto;
      	/*or margin: 0.1px; */
      }
      
      .parallax {
      	background-image: url("http://poiemaweb.com/img/bg/stock-photo-125979219.jpg");
      	/* parallax scrolling effect */
      	background-attachment: fixed;
      }
      
      .normal {
      	background-image: url("http://poiemaweb.com/img/bg/stock-photo-155153867.jpg");
      }
      
      #page-wrap {
      	width: 400px;
      	/* 마진 상쇄 발생 */
      	margin: 50px auto;
      	padding: 30px;
      	background: white;
      	box-shadow: 0 0 20px black;
      	/* size/line-height | family */
      	font: 15px/2 Georgia, Serif;
      }
    </style>
  </head>
  <body>
    <div class="bg-wrap parallax">
      <div id="page-wrap">
        <p>background-attachment : Specifies whether the background images are fixed or scrolls with the rest of the page</p>
        <p>background-attachment : Specifies whether the background images are fixed or scrolls with the rest of the page</p>
        <p>background-attachment : Specifies whether the background images are fixed or scrolls with the rest of the page</p>
      </div>
    </div>
    <div class="bg-wrap normal"></div>
  </body>
</html>

5. background-position

  • 일반적으로 backgroun-image는 좌상단부터 이미지를 출력하는데, background-position을 사용하면 이미지의 좌표 (xpos, ypos)를 지정 가능

  • background-position: 0% 0% (기본값);
    배경 이미지는 우측 상단에 위치하게됨

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      	margin: 0px;
      }
      
      div {
        background-image: url("http://poiemaweb.com/img/bg/dot.png");
        background-color: #FFEE99;
        background-repeat: no-repeat;
        width: 32vw;
        height: 200px;
        margin-bottom: 2vw;
        float: left;
      }
      
      div:not(:nth-of-type(3n+1)) {
      	margin-left: 2vw;
      }
      
      .example1 {
      	background-position: top;
      }
      .example2 {
      	background-position: bottom;
      }
      .example3 {
      	background-position: center;
      }
      .example4 {
      	background-position: left;
      }
      .example5 {
      	background-position: right;
      }
      .example6 {
      	/* percentage values */
      	background-position: 25% 75%;
      }
      .example7 {
      	/* length values
      		xpos ypos */
      	background-position: 10px 20px;
      }
      .example8 {
      	background-image: url("http://poiemaweb.com/img/bg/dot.png"), url("http://poiemaweb.com/img/bg/dot.png");
      	background-position: 0px 0px, center;
      }
    </style>
  </head>
  <body>
    <div>default(0% 0%)</div>
    <div class="example1">top</div>
    <div class="example2">bottom</div>
    <div class="example3">center</div>
    <div class="example4">left</div>
    <div class="example5">right</div>
    <div class="example6">25% 75%</div>
    <div class="example7">10px 20px</div>
    <div class="example8">0px 0px, center</div>
  </body>
</html>

6. background-color

  • background-color: 요소의 배경 색상을 지정, 색상값 또는 transparent 키워드 지정 가능
.bg-col-white {
	background-color: rgb(255, 255, 255);
}

bg-col-red {
	background-color: red;
}

7. background Shorthand

  • background shorthand : background-color, background-image, background-repeat, background-position을 한번에 정의하기 위한 Syntax
background: color || image || repeat || attachment || position
<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
      	/* background: color || image || repeat || attachment || position */
      	background: #FFEE99 url("http://poiemaweb.com/img/bg/dot.png") no-repeat center;
      	width: 50vw;
      	height: 300px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
profile
이소라
이전 포스트

CSS3 - Display, Visibility, Opacity

다음 포스트

CSS3 - Font & Text

0개의 댓글

관련 채용 정보