• Q&A
  • 회원가입
  • 로그인

[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. 예제 더 보기
 

 

background-image 구문

 

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

 


[속성값]

 

url ( 'URL주소')

이미지 URL 주소.
둘 이상의 이미지 지정하려면 URL을 쉼표로 구분.

 

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>

 

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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012