• 회원가입
  • 로그인

[background] CSS - background 속성 ★ - 배경 일괄 (= background속성 = 백그라운드속성)

목차
  1. background 예제 - 배경색・배경이미지 동시 사용
  2. background 정의
  3. background 구문
  4. background 예제 - 배경이미지 요소에 꽉차게
  5. background 예제 - 자식요소 클릭 시, 부모요소 배경색 변경
  6. background 예제 - 배경이미지 이미지 위에 텍스트 넣기
  7. background 예제 - 배경이미지에 색상 필터 효과 주기

 

background 예제 - 배경색・배경이미지 동시 사용 


<style>
body {background: red url("http://i.imgur.com/N0haYzT.gif") no-repeat right top fixed;}
p {color:white; font-weight:bold; font-size:30px; text-align:center;}
</style>

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

PS. 배경색만 지정.
 
<style>
p {background: red}
</style>
 
<p>홈짱닷컴 (homzzang.com) </p>
 

고급 응용 : https://codepen.io/sinbi/pen/xoPbLQ

 

background 정의

 

배경 관련 속성을 한번에 정의.

※ 필요한 배경 속성만 선별 사용 가능.

 


 

1.

  • 기본값: 각각의 기본 속성 참고
  • 상속여부 : X
  • 애니효과 : O
  • CSS버전 : CSS1 + CSS3
  • JS구문 : object.style.background="red url(hz.gif) top left no-repeat"

 

2.

모든 브라우저 지원

일부 CSS3 속성값 경우 IE9 이상.

 

3.

※ background-color 속성과 background-image 속성은 동시 사용 가능.

※ background-image 와 같이 사용하는 속성.

 

 4.

한번에 여러 속성값 사용 가능 O

 

 

background 구문

※ 내용 전달 편의 위해, 속성값에 background 대신 bg 사용.

 

selector {background: bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;}

 


[참고]

 

1.

속성값에 bg-size 속성 사용 경우/(슬래시) 사용해 bg-position 속성과 구분.
(예 : background : url (hz.gif) 10px 20px / 30px 40px;)
10px 20px : background-position (위치: 왼쪽 10px, 위 20px 자리에 위치)

30px 40px : background-size (크기: 너비 30 픽셀, 높이 40 픽셀)


2.

여러 배경이미지와  배경색을 함게 사용 시, 배경색이  마지막에 와야 함.

 


[속성값]

  

배경 색깔 (기본값 transparent, 상속 X). CSS1

background-image
배경 주소 (기본값 none, 상속 X, 기본적으로 왼쪽 상단에 위치하며 이미지 반복). CSS1

background-position
배경 위치 (기본값 0% 0%, 상속 X). CSS1
 
배경이미지 크기. (기본값 auto, 상속 X). CSS3
 
background-repeat
배경이미지 반복. (기본값 repeat, 상속 X). CSS1
 
background-origin
배경 시작 지점 (기본값 padding-box, 상속 X). CSS3

배경 출력 영역 정의 (기본값 border-box, 상속 X). CSS3
 
background-attachment
배경이미지 고정. (기본값 scroll, 상속 X). CSS1

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

 

inherit

부모요소의 속성값 상속. CSS2

 

 

background 예제 - 배경이미지 요소에 꽉차게

[방법1]

 

<div style="background:url('이미지 주소'); background-size:100% 100%;"></div>

 


[방법2]

 

<div style="background:url('이미지 주소'); background-size:cover;"></div>

 

 

background 예제 - 자식요소 클릭 시, 부모요소 배경색 변경

[방법1] - 자식요소의 box-shadow 이용 방법

 

<style>

div {

    overflow: hidden;

    background-color: blue;

    padding:20px;

    text-align:center;

}

div * {

    position: relative;

    z-index: 10;

}

div input[type=text]:focus {

    background-color: yellow;

    box-shadow: 0 0 10000px 10000px red;

    z-index: 5;

}
</style>

 

<div>

    <input type="text" />

    <input type="text" />

</div>

 

결과보기

https://stackoverflow.com/questions/18336435


[방법2] - 부모요소 역할하는 더미 자식요소 추가. z-index 설정 중요.

 

<style>

.nav {position:relative;}

.nav .menu {background:black; padding:50px;}

.nav .menu ul:after {content:''; display:block; clear:both;}

.nav .menu .menu_li {float:left; width:200px; height:50px; line-height: 50px; text-align:center;}

.nav .menu .menu_li a {position:relative; z-index:3; color:white;}

.nav .menu .menu_li .bg {display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; border:5px solid red;}

  

.nav .menu .menu_li a:hover {background:red; display:block; cursor:pointer;}  

.nav .menu .menu_li:hover .bg {display:block; background:blue;}

</style>

 

<div class="nav">

    <div class="menu">

        <ul>

            <li class="menu_li">

                <a>메뉴1</a>

                <div class="bg"></div>

            </li>

            <li class="menu_li">

                <a>메뉴2</a>

                <div class="bg"></div>

            </li>

            <li class="menu_li">

                <a>메뉴3</a>

                <div class="bg"></div>

            </li>

        </ul>

    </div>

</div>

 

결과보기

DSLOVE 님 (2020.04.03) https://sir.kr/qa/352957

 

background 예제 - 배경이미지 이미지 위에 텍스트 넣기

 

<style>

#box {background:red url('box.jpg'); overflow:hidden; padding:30px;}

#box .a {background:blue url('a.jpg') no-repeat center top; clear:both;}

#box .b {background:green url('b.jpg') no-repeat left top; float:left; width:50%}

#box .c {background:tomato url('c.jpg') no-repeat right top; float:right; width:50%}

</style>


<div id='box' class=''>

    <div class='a'>a</div>

    <div class='b'>b</div>

    <div class='c'>c</div>

</div>

 

결과보기 

ps. 배경이미지가 존재 않는 경우 대비해, 배경색도 함께 기재.

관련글 (200619) https://sir.kr/qa/364736

 

background 예제 - 배경이미지에 색상 필터 효과 주기

 

<style>

div {

  width:185px;

  height:39px;

  position: relative;

}


.a {

  background-color: red;

  opacity: 0.5;

  z-index: 2;

  position: absolute;

}


.b {

  background-image: url('https://i.imgur.com/WfW5mBC.png');

  z-index: 1;

  position: absolute;

}

</style>

 

<div>

  <div class="a"></div>

  <div class="b"></div>

</div>

<div class="b"></div>

 

결과보기


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

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