css 배경

background-color:green;
/*고유 색으로 지정한다*/
background-img:url("img_tree.gif");
/*이미지로 지정한다*/
background-repeat:no-repeat;
/*배경을 반복할지 묻는다*/
background-position:top center;
/*어떻게 정렬할지 선택한다*/
background-attachment:scroll;
/*배경을 고정할지 스크롤함에 따라 같이 움직일지 선택한다*/

/*축약형*/
background:green url("img_tree.gif") no-repeat fixed center;
/*한번에 배경 속성을 입력한다
이 경우 배경은 녹생이며 img_tree.gif가 삽입된다, 반복되지 않으며 배경은 움직이지 않고
고정되며 가운데 정렬된다*/

예제의 활용

div{
        background-color:pink;
      }
      span{
        background-color:pink;
      }

<div>배경변경</div>
    <span>배경변경</span>

출력값

• div는 block태그이기때문에 div가 선언된 전체의 배경색이 변한다
• span은 line태그이기때문에 span이 지정된 단어까지만 배경생이 변한다

div{
        height:500px;
        background-color:yellow;
        background-image:url(cherry-tree.png);
      }

• 이 경우 높이를 500px로 적용하였기 때문에 div의 범위는 500px가 된다
• 배경은 yellow색상을 가진다
• 배경에 이미지가 들어가있다

출력값

• 투명한 이미지의 배경색이 지정한 배경색으로 깔렸음을 알수있다
• 기본적으로 이미지가 왼쪽을 기준으로 오른쪽과 아랫쪽으로 반복되고있다

반복

• 배경이미지에 반복에 대해 알아보기위해 https://developer.mozilla.org/ko/docs/Web/CSS/background-repeat를 참고한다

div.a{
        height:500px;
        background-color:yellow;
        background-image:url(cherry-tree.png);
        background-repeat:repeat-x;
        font-size:500%;
      }
    div.b{
        height:500px;
        background-color:yellow;
        background-image:url(cherry-tree.png);
        background-repeat:repeat-y;
        font-size:500%;
      }
    div.c{
        height:500px;
        background-color:yellow;
        background-image:url(cherry-tree.png);
        background-repeat:space;
        font-size:500%;
      }
      div.d{
          height:500px;
          background-color:yellow;
          background-image:url(cherry-tree.png);
          background-repeat:no-repeat;
          font-size:500%;
        }
        div.e{
            height:500px;
            background-color:yellow;
            background-image:url(cherry-tree.png);
            background-repeat:space repeat;
            font-size:500%;
          }
						div.f{
              height:500px;
              background-color:yellow;
              background-image:url(cherry-tree.png);
              background-repeat:round;
              font-size:500%;
            }

출력값

• repeat-x : x축으로 반복한다 (오른쪽 반복)
• repeat-y : y축으로 반복한다 (아래로 반복)
• space : 화면 크기에 맞춰 x축으로 분배될수 있게 간격을 둔다
• no-repeat : 반복하지 않는다
• space repeat : 분배된 값을 y축으로도 반복한다
• round : 그림이 잘리지 않도록 크기값을 조절한다

백그라운드의 위치

• background-position :(포지션A) (포지션B) ; -실제 입력시 괄호는 치지 않는다.

  • 앞의 값이 X축 뒤에 값은 Y축으로 지정된다

    • left center : x축은 가장 왼쪽 y축은 가운데로 지정된다.

    • 표처럼 인식하면 된다

      left top	center top	right top
      left center	center center	right center
      left bottom	center bottom	right bottom

  • %값으로 지정할수 있다 각각 (x축의 %) (y축의 %)가 된다.

    • 표와같이 인식할수있으며 %로 구체적인 값을 조절가능하다

      0% 0%	50% 0%	100% 0%
      0% 50%	50% 50%	100% 50%
      0% 100%	50% 100%	100% 100%

  • 그 외에도 %와 마찬가지로 10px 100px등 px값을 입력할수있다.

  • bottom right 값을 입력하여 조절할수있다

    bottom 0% right 0%
    	bottom 50% right 50%
    		bottom 100% right 100%

  • 이처럼 구체적으로 top left를 입력하여 그 뒤에 수치를 주어 조절이 가능하다

• 단일 포지션 값을 입력할수있다

기본값	top
left	center	right
	bottom

백그라운드의 고정

**/* 키워드 값 */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* 전역 값 */
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;**

• 초기값은 scroll이다
  • 이는 화면이 스크롤될때 배경그림은 고정하는 것을 뜻한다
  • inherit과 같은 쓰임
• fixel : 배경을 화면에 고정한다
  • scroll과 다른점은 scroll은 배경을 요소 고정하는것이다
  • fixel은 배경을 보이는 값으로 고정하는것이다, 거의 같은 활용이지만 미묘하게 차이가 난다.
  • initial과 같은쓰임
• local : 배경이 요소와 함께 움직인다
  • 반대로 말하면 요소에 고정된다고 할수있다.
  • unset과 같은 쓰임

  실행결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-3.html