background-image

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

background-image 는 배경 이미지를 설정합니다.
background 에서 이미지 설정만 특화된 것입니다.

예제 1
개요
보기
background-image : url('이미지 경로')
소스
<style type="text/css">
    .css_test {
        background-image : url('http://superkts.com/img/css/bg0426.gif');
        border : 5px solid #555;
        border-radius : 5px;
        box-shadow : 0 0 10px gray;
        color : white;
        font-size : 14pt !important;
        font-weight : bold;
        height : 300px;
        line-height : 300px !important;
        text-align : center;
        text-shadow : 0 0 2px black, 0 0 5px black;
    }
</style>

<div class="css_test">background-image : url('이미지 경로')</div>
설명
- DIV에 배경이미지를 넣어보았습니다. (기본으로 반복처리 됩니다)

사용 예
background-image : url( "이미지 경로" )

background-image : url( "http://superkts.com/img/xxx.gif" )  -  절대경로 (다른 도메인의 이미지 사용예)
background-image : url( "/img/xxx.gif" )  -  절대경로
background-image : url( "../img/xxx.gif" )  -  상대경로

- 참고 : background

사용한 이미지
예제 2
배경을 반복하지 않을때의 모습
보기
소스
<style type="text/css">
    .css_test {
        background-image : url('http://superkts.com/img/css/bg0426.gif');
        background-repeat : no-repeat;
        border : 5px solid #555;
        border-radius : 5px;
        box-shadow : 0 0 10px silver;
        height : 300px;
    }
</style>

<div class="css_test"></div>
설명
- 첫번째 예제와 동일한 크기의 DIV 인데 배경반복을 하지 않은 모습입니다.
- background-repeat : no-repeat 로 반복 하지 않도록 했습니다.
- background-repeat 도 참고해 보세요 ^^
예제 3
두개 이상의 배경이미지 사용하기
보기
소스
<div style="border:1px solid gray; background-image:url('http://superkts.com/img/css/flower01.gif'), url('http://superkts.com/img/css/flower11.gif'); height:200px;"></div>
<div style="border:1px solid gray; background-image:url('http://superkts.com/img/css/flower11.gif'), url('http://superkts.com/img/css/flower01.gif'); height:200px;"></div>
사용된 CSS (클릭시 보기) : background-imageborderheight
설명
- ,(컴마) 로 구분하여 나열해 주면됩니다.
- 먼저 지정하는 이미지가 위에 표시됩니다.
- 위 예제는 배경이 투명한 gif 이미지 두개의 순서를 다르게하여 만들어 보았습니다.
예제 4
배경이미지 두개 적용 다른 예
보기
소스
<style type="text/css">
    .css_test {
        background-image : url('http://superkts.com/img/css/flower01.gif'), url('http://superkts.com/img/css/flower11.gif');
        background-position : top, bottom;
        background-repeat : repeat-x, repeat-x;
        border : 1px solid gray;
        height : 300px;
    }
</style>
<div class="css_test"></div>
설명
- background-image : url('이미지1 경로'), url('이미지2 경로')
- background-repeat : repeat-x, repeat-x
- background-position : top, bottom 각각의 속성을 , 로 구분하여 개별 설정했습니다.

repeat-x 는 같은것이 두개 사용되었는데 이럴때는 하나만 사용해도 동일하게 적용됩니다.
- background-repeat : repeat-x 이렇게요
연구 1
CSS 로 꾸며보기
보기
CSS 공작소
소스
<style type="text/css">
    .css_test {
        background-image : url('http://cfile23.uf.tistory.com/image/225BA93954EA01760701E8');
        border-radius : 10px;
        border : 5px solid #006464;
        box-shadow : 0 0 5px black, 0 0 7px white inset;
        font-size : 12pt;
        margin : 0 auto;
        padding : 30px;
        text-align : center;
        width : 490px;
    }
    .css_test span {
        color : white;
        font-size : 55pt !important;
        font-weight : bold;
        line-height : 308px;
        text-shadow : 0 0 15px white, 0 0 10px white, 0 0 2px black, 0 0 5px black;
    }
</style>

<div class="css_test">
    <span>CSS 공작소</span>
</div>
설명
- text-shadowbox-shadow 를 다중으로 사용하였습니다. (컴마로 구분하여 사용)
- 어항 물을 갈고나니 너무 깨끗해서 찍어본 사진으로 만들어 보았습니다. ^^;
+ 관련 CSS +