웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

background 본문

css3

background

jokack01 2013. 10. 2. 16:07

background

 

background 속성은 모든 background 속성들을 한번에 선언할 수 있는 축약속성이며 css3 에서는 새로 추가된 background-size, background-origin, Multi-background -image 속성에 대해 설명한다.

 

 

  • background -size  :  배경이미지의 사이즈를 지정

Length : width, height 값을 직접 지정. 하나만 지정할 경우 나머지는 auto 값을 적어준다

Cover : 이미지 크기 비율을 그대로 유지한 상태에서 원하는 영역에 전체 이미지가 들어가도록 가장 작은 크기로 이미지 스케일을 조정한다.(가로와 세로 중 큰 값에 맞춘다)

Contain : 박스의 넓이값에 자동으로 맞춰 준다.

 

  • background -origin : 배경이미지가 시작될 지점을 지정

padding-box : 패딩을 포함한 영역에서부터 배경이미지를 시작함

border-box  : 테두리를 포함한 영역에서부터 배경이미지를 시작함

content-box : 콘텐츠 영역에서 배경이미지를 시작함

* padding-box, border-box 는 실행결과가 비슷하다.

 

  • Multi-background -image : 여러 개의 이미지를 백그라운드 이미지로 한번에 적용 할 수 있다.

background-image:url(ho30.jpg), url(bg.png);

먼저 작성한 코드가 상단에 배치 된다.

 

ex1 ) background-size : Length

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Background-size</title>
<style type="text/css">
div
{
background:url(bg.png);
width:300px;
height:200px;
background-size:300px 200px;
/*  넓이값, 높이값  */
background-repeat:no-repeat;
}
</style>
</head>
<body>
     
<div>
test
</div>
<p>
    <img src="bg.png" /><br>
    Original image
</p>
  
</body>
</html>

 

 

ex2 ) background-size : Contain 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Background-size</title>
<style type="text/css">
div
{
background:url(bg.png);
width:250px;
height:150px;
border:1px solid blue;
background-size: contain;
/* contain : 박스의 넓이값에 자동으로 맞춰 준다. */
background-repeat:no-repeat;
padding-top:40px;}
</style>
 
</head>
<body>
     
<div>
    박스 넓이값에 자동으로 맞추기
</div>
<p>
    <img src="bg.png" /><br>
    Original image
</p>
  
</body>
</html>

 

 

ex3) background-size:Cover

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Background-size</title>
<style type="text/css">
div
{
background:url(bg.png);
width:250px;
height:200px;
border:1px solid blue;
background-size: cover;
/* cover : 비율을 유지한 상태에서 박스안에 꽉차도록 맞춘다. */
background-repeat:no-repeat;
padding-top:40px;}
</style>
 
</head>
<body>
     
<div>
    비율을 유지한 상태에서 박스안에 꽉차도록 맞춘다.
</div>
<p>
    <img src="bg.png" /><br>
    Original image
</p>
  
</body>
</html>

 

 

 

ex4) background-orign : padding-box , border-box , content-box 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Background-orign</title>
<style type="text/css">
div
{
border:1px solid black;
padding:35px;
background-image:url('ho30.jpg');
background-repeat:no-repeat;
background-position:left center;
}
#div1
{
background-origin:border-box;
/*보더라인을 기준으로 정렬 */
}
#div2
{
background-origin:padding-box;
/* 패딩을 포함한 영역에서부터 배경이미지를 시작함 */
}
#div3
{
background-origin:content-box;
/* 실제컨텐츠 내용부분 기준으로 정렬 (패딩안쪽영역) */
}
</style>
</head>
<body>
<p>background-origin:border-box:</p>
<div id="div1">border-box</div>
<p>background-origin:padding-box:</p>
<div id="div2">padding-box</div>
<p>background-origin:content-box:</p>
<div id="div3">content-box</div>
</body>
</html>

 

 

 

ex5) Multiple Background Images

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Multiple Background Images</title>
<style type="text/css">
body
{
background-repeat: repeat-y, repeat-x;
/* , 로 구분하여 사용*/
background-image:
url(ho30.jpg),
url(bg.png);
/* 먼저 작성한 코드가 상단에 배치 된다. */
}
</style>
</head>
<body>
</body>
</html>

'css3' 카테고리의 다른 글

word-wrap  (0) 2013.10.08
text-shadow  (0) 2013.10.08
box-shadow  (0) 2013.10.02
border-image  (0) 2013.10.02
border-radius  (0) 2013.10.01
'css3' Related Articles more