이미지에 백그라운드 이미지 적용하기

원문 : http://www.contentwithstyle.co.uk/Blog/183/css-background-image-on-html-image-element

이미지에 백그라운드를 적용할수 있을까?? 라는 질문에서 시작된 예제입니다.

생각해본적이 없었는데 재밌네요 ^^;

방식은 이미지에 display:block과 padding 값으로 주는 것입니다.

div {
background: url('blur.jpg') no-repeat top left;
width: 232px;
height: 200px;
}

img {
display: block;
background: url(‘parallax.gif’) no-repeat bottom left;
padding: 93px 100px 75px 100px;
}
샘플 예제 : http://www.semantic.pe.kr/example/img_bg_demo/

css 에 올린 글
1 에 한 댓글이 있습니다. “이미지에 백그라운드 이미지 적용하기” 上
  1. 옷장수말하길

    게임 만드시면 되겠군요. ㅋㅋ

댓글 남기기

이메일은 공개되지 않습니다.

다음의 HTML 태그와 속성을 사용할 수 있습니다: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>