[background] CSS - background-image 속성 ★ - 배경이미지 (= background-image속성 = 백그라운드이미지속성, 상속 X) ※ 무한 슬라이드

1. background-image 정의
2. background-image 구문 ★
3. background-image 예제 - 상속 X, 단 영향은 미침
4. background-image 예제 - 자식요소 margin 부분은 포함 X
5. background-image 예제 - 자식요소 margin 부분도 포함 O
6. background-image 예제 - 배경이미지 무한 슬라이드

background-image 정의 

 

요소에 하나 이상의 배경이미지 설정.

 

---

 

1.

배경이미지는 요소 왼쪽상단모서리에 배치되며 수직/수평 반복.

ps. 

반복 안되게 하려면, background-repeat:no-repeat 속성 추가.

 

2.

요소 배경은 padding /border 포함 요소의 전체 크기임. (margin은 제외)

앞서 https://homzzang.com/css/32 에서도 설명드렸지만,

부모요소에 테두리 안 주면 자식요소 부분에만 배경이미지 생김. 

 

3.

배경이미지 비작동 대비해 항상 background-color 속성도 설정 권장.

 

4.

• 기본값 : none
• 상속여부 : X
• 애니효과 : X
• CSS버전 :CSS1 + CSS3에서 새로운 속성값 추가.
• JS구문 : object.style.backgroundImage="url(img_girl.gif)"

 

5.

스프라이트 이미지 (Sprite Image : 여러 이미지를 한 이미지 파일에 모아놓은 통파일 된 배경이미지) 사용해 이미지 요청 개수 줄이면 로딩 속도 개선됨.

※ background-position 속성 이용해 각각의 이미지 선택.

(예) 

background: url(//t1.daumcdn.net/daumtop_deco/images/top/2017/ico_pctop_190618_v2.png) no-repeat 0 0;

 

6.

모든 브라우저 모두 지원.

 

7. 예제 더 보기

https://developer.mozilla.org/ko/docs/Web/CSS/background-image

 

background-image 구문 ★

 

selector {background-image: url('URL주소')|none|initial|inherit;}

 

---

[속성값]

 

url ( 'URL주소')

이미지 URL 주소.

• 둘 이상의 이미지 지정하려면 URL을 쉼표( , )로 구분. (예) background-image: url('/1.png'), url('/2.png'), url('/3.png');
• 절대주소/상대주소 개념 이해하기

 

none

배경이미지 사용 안 함. (기본값)

 

linear-gradient()
선형 그레이디언트를 배경이미지로 설정.

• 최소 두 가지 이상의 색상 정의 (위에서 아래로)

 

radial-gradient()

방사형 그레이디언트를 배경이미지로 설정.

• 최소 두 가지 색상 정의 (중심에서 변방으로)

  

repeating-linear-gradient()

선형 그레이디언트 반복

 

repeating-radial-gradient ()

방사형 그레이디언트 반복.

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모 요소의 속성값 상속.

 

---

PS. 여러 속성값 동시 사용 가능. (※ 첫 번째 것이 맨위에 옴.)

예제
background-image: linear-gradient(to bottom,rgba(17,17,17,0.5) 10%, rgba(17,17,17,0.85) 30%), url('이미지주소');
 

background-image 예제 - 상속 X, 단 영향은 미침

부모요소에서 배경이미지 지정하면, 그 효과가 자식요소인 h1에도 미침.

다만,

명백한 상속 표시 위해, 자식요소에 background-image: inherit; 표기.

<style>
div {
    width:400px; 
    height:60px;
    background-image: url("http://i.imgur.com/MzHQIAK.jpg"); 
    border:1px solid brown;
}
h1 {
    margin:10 10 10 10px;
    color:white;

    background-image: inherit; 
}
</style>

 

<div>

    <h1>홈짱닷컴 (homzzang.com)</h1>

</div>

결과보기

background-image 예제 - 자식요소 margin 부분은 포함 X

※ 부모요소 div에 border 값을 안 주면 자식요소 margin 포함 X.

<style>
div {
   background-image: url("http://i.imgur.com/MzHQIAK.jpg"); 
}
h1 {
   background-image: inherit; 
}
</style>

 

<div>

    <h1>홈짱닷컴 (homzzang.com)</h1>

</div>

 

결과보기

background-image 예제 - 자식요소 margin 부분도 포함 O

※ 부모요소에 border 줘서 자식요소 margin에도 배경이미지 주기.

<style>

div {
    background-image: url("http://i.imgur.com/MzHQIAK.jpg");

    border: 1px solid red; 
}
h1 {
    background-image: inherit; 

}
</style>

<div>

    <h1>홈짱닷컴 (homzzang.com)</h1>

</div>

 

결과보기

---

PS. 부모요소에 border 줘도 자식요소에 배경이미지 설정 시, margin 포함 X.

 

<style>

div { border: 1px solid red; }

h1 { background-image: url("http://i.imgur.com/MzHQIAK.jpg"); }

</style>

<div>

    <h1>홈짱닷컴 (homzzang.com)</h1>

</div>

 

결과보기

background-image 예제 - 배경이미지 무한 슬라이드

 

<style>

body {

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-content: center;

  align-items: center;

  flex-wrap: wrap;

  width: 100vw;

  height: 100vh;

}

.infinite-photo-grid {

  width: 100%;

  height: 100%;

  max-height: 750px;

  background-image: url(https://raw.githubusercontent.com/s1mpson/-/master/codepen/infinite-photo-grid/photo-grid.jpg);

  background-size: calc(4.84 * min(100vh, 750px)) min(100vh, 750px);

  background-repeat: repeat-x;

  animation: scroll 50s linear infinite;

}

@keyframes scroll{

  from {

    background-position: left calc(4.84 * min(100vh, 750px)) top 0px;

  }

  to {

    background-position: left 0px top 0px;

  }

}

</style>

 

<main class="infinite-photo-grid"></main>

 

결과보기