css-9: 배경꾸미기

배경꾸미기

no-repeat

* 크기가 정해진 박스보다 이미지의 크기가 작을경우, 기본적으로 1개만 나옴

div{
   background-repeat : no-repeat;    
}

---

---

repeat

여기서, background-repeat : repeat; 을 적용할 경우

div가 채워질때까지 이미지를 만듦

div {
    background-repeat : repeat;
}

* background-repeat : repeat-x나, repeat-y로 가로,세로만 적용할 수 있고

space, round 등이 있음.

---

---

position

* 박스 안에 이미지의 위치를 지정 할 수 있음

background-position: 20%(가로) 40%(세로); 또는 bottom 10px right 3vw; 등…

---

---

background-size

* 부모에 대비한 사이즈 조정 가능

background-size: 100px 150px / auto / 10% / 200px auto 등..

div{
    background-size: contaion;
}

* 긴쪽을 딱 맞추고, 작은쪽을 조금 남김.

* background-size: cover; 는 화면에 딱맞음!!(position을 center로 해줘야함)

---

---

명함사진 만들기

* html

  <div class="outer">
	<div class="with-bg"></div>

*css

.outer {
  width: 200px; height: 200px;
  background-color: #eee;
  border-radius: 50%;
  overflow: hidden;
}
.with-bg {
  height: 100%;
  background-image: url(https://showcases.yalco.kr/html-css/02-08/images/mona-lisa.jpg);
  background-size: cover;
  border-radius: 50%;
}

---

___

배경에 그라데이션 넣기

실습1

div {
  background: linear-gradient(gold, tomato);
}

___

실습2

div {
  background: linear-gradient(gold, tomato);
}

---

실습3

div {
  backgrund: linear-gradient(gold, tomato);
}