[html][css] css 속성 - 배경 background/ color image repeat position attachment size

background: 색상 이미지경로 반복 위치 스크롤특성;

 

■background-color(background)

div{
  width:200px;
  height:100px;
  background: skyblue;
}

■background-image

요소의 배경에 하나 이상의 이미지를 삽입할 수 있다.

div{
  width:1000px;
  height:1000px;
 background-image: url("https://search.pstatic.net/common/?src=http%3A%2F%2Fimgnews.naver.net%2Fimage%2F609%2F2021%2F03%2F11%2F202103110904242410_1_20210311090556204.jpg&type=sc960_832");
}

div{
  width:100vw;
  height:100vh;
 background-image: url("https://search.pstatic.net/common/?src=http%3A%2F%2Fimgnews.naver.net%2Fimage%2F609%2F2021%2F03%2F11%2F202103110904242410_1_20210311090556204.jpg&type=sc960_832") , 
   url("https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTAxMTNfNiAg%2FMDAxNjEwNTE4OTE3MTMz.iKTZ6EY_0HrePKGORPHl2rM1ZHWAy-PFl_w4cOTdGKsg.BiEF8N4fdwYsv2AuFlmoc_zibK9FAjJ0MILUDRPDSSEg.JPEG.hangyul0711%2Foutput_1146062945.jpg&type=sc960_832") ;
background-repeat: no-repeat;
}

 

 

이렇게 url을 하나 더 하고 no-repeat을 넣으면

먼저 넣은 사진이 위로 올라오고 겹쳐서 출력이 된다. 

이런 경우는 잘 안쓴다고 한다.

 

■background-repeat

아까 본대로 기본은 repeat을 하는데 

no-repeat을 설정하면 반복없음이다.

repeat-x :배경이미지를 수평으로 반복

repeat-y: 배경 이미지를 수직으로 반복

 

 

■background-position

background-position: 방향1 방향2;

background-position: x축 y축;

div{
  width:500px;
  height:500px;
 background-image: url("https://search.pstatic.net/common/?src=http%3A%2F%2Fimgnews.naver.net%2Fimage%2F609%2F2021%2F03%2F11%2F202103110904242410_1_20210311090556204.jpg&type=sc960_832");
 background-size:100px;
 background-repeat: no-repeat;
  border: 1px solid black;
  background-position: right bottom;
}

div{
  width:500px;
  height:500px;
 background-image: url("https://search.pstatic.net/common/?src=http%3A%2F%2Fimgnews.naver.net%2Fimage%2F609%2F2021%2F03%2F11%2F202103110904242410_1_20210311090556204.jpg&type=sc960_832");
 background-size:100px;
 background-repeat: no-repeat;
  border: 1px solid black;
  background-position: 100px 50px;
}

x축으로 100px갔고 y축으로 50px갔다.

100px bottom 이런식으로 써도 되는데 순서를 바꾸면 안됨

x축 y축으로 봐야함

 

■background-attachment

요소가 스크롤될때 배경 이미지의 스크롤 여부를 설정

scroll - 기본적으로 스크롤이 된다.

fixed - 화면이 스크롤 되어도 이미지는 스크롤이 안된다.

local - 스크롤 특성이 지역적으로 바뀐다. 특정한 요소 내부에서 지역적으로 사용한다. (사용이 흔치 않음)

 

<예시- 스타벅스 홈페이지>

fixed

<section class="section1"></section>
<section class="section2"></section>
<section class="section3"></section>
<section class="section4"></section>
<section class="section5"></section>

section{
  height:300px;
  border: 2px dashed lightgray;

}
.section1{
    background-image: url('https://image.istarbucks.co.kr/upload/common/img/main/2021/2021_summer1_bean_bg.jpg');
  background-size: auto 80%;
  background-position: right bottom;
  background-attachment: fixed;
}
.section2{
    background-image: url('https://www.starbucks.co.kr/common/img/main/fav_prod_bg_new.jpg');
  background-size: auto 100%;
  background-position: right bottom;
  background-attachment: fixed;
}

 

■background-size

 

auto - 배경 이미지가 원래의 크기로 표시됨

cover - 배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐. 이미지가 잘릴 수 있음

contain - 배경 이미지의 크기 비율을 유지하며, 요소의 짧은 너비에 맞춰짐. 이미지가 잘리지 않음

 

.box{
  width: 400px;
  height: 300px;
  border: 2px solid red;
  margin: 50px;
  background-image: url('https://search.pstatic.net/common/?src=http%3A%2F%2Fimgnews.naver.net%2Fimage%2F241%2F2021%2F01%2F08%2F0003083444_001_20210108104820483.jpg&type=sc960_832');
  background-size: cover;
}

.box{
  width: 400px;
  height: 300px;
  border: 2px solid red;
  margin: 50px;
  background-image: url('https://search.pstatic.net/common/?src=http%3A%2F%2Fimgnews.naver.net%2Fimage%2F241%2F2021%2F01%2F08%2F0003083444_001_20210108104820483.jpg&type=sc960_832');
  background-size: contain;
  background-repeat: no-repeat;
}