학원/CSS

11/4 36-2 [CSS]Background

도원결의 2022. 11. 4. 18:06

배경관련 CSS속성

구현 전

 

1.배경색 지정(background-color: 색깔지정 )

<body><div>
   <h2>배경색 지정</h2>
      <div style="background-color: rgb(255, 84, 32);">블락 엘리먼트</div>
      <span style="background-color: rgb(83, 161, 67); ">인라인 엘리먼트</span>
    </div></body>

 

2.배경 이미지 지정(background-image:url(주소) )

배경색과 배경이미지 동시에 주면 최종적으로 배경이미지가 적용됨 (배경이미지 > 배경색)
이미지의 가로 세로 위치는 반복속성이 no-repeat일 때 의미 있다.
다시 말해서 repeat-x일때는 x좌표는 의미 없고 repeat-y일때는 y좌표는 의미 없다.

 

<style>
	#div div{
        width: 80% ;
        height: 400px;
        background-color: #b10d0d;
        background-image: url(../HTML5/images/sumnail.png);   
        background-repeat: no-repeat;        
	}

	#div div:first-child{
    	/*css3에서 등장*/
   		 background-size: 100% 100%; /*가로폭 세로폭*/
   	}

	#div div:last-child{   
    background-size: 50% 50%; /*가로폭 세로폭*/
	 }
     
</style>
<body>
<div style="background-image:url(../HTML5/images/sumnail.png); width:500px ;height:300px; background-repeat:no-repeat; background-color: bisque ; background-position: 50% 50%;">
      다이브 입니다. </br>
      정가운데 배치하기(background-position: 50% 50%)
    </div>
    <div id="div">
        <div>첫 번째 다이브</div>
        <hr/>
        <div>두 번째 다이브</div>
    </div>
    <hr/>
    </body>

sumnail.png
0.03MB

3.동시에 여러 속성 지정하기

 <!-- 50% 50%(background-position)/30% 30%(background-size) 액자느낌나게 만들기-->
    <div style="width: 300px; height: 300px; background:url(../HTML5/images/sumnail.png) no-repeat rgb(3, 71, 31) 50% 50% /98% 98% ;">
      동시에 여러 속성 지정하기</br>
      background:

    </div>
Background05.html

배경관련 CSS속성

배경색 지정

블락 엘리먼트
인라인 엘리먼트

배경 이미지 지정

다이브 입니다.
정가운데 배치하기( background-position: 50% 50%)
첫 번째 다이브
두 번째 다이브
동시에 여러 속성 지정하기