이것을 달성하기 위해 내 요소 외부로 작은 PNG를 이동하는 방법?

Question

어떻게 비슷한 결과를 얻을 수 있습니까?

기본적으로, 질문은 : 캡션 외부로의 나는 왼쪽에서 모퉁이에 작은 PNG를 배치 할 수 있으며이 효과를 달성하는 방법?

나는 최신 카테고리 게시물 루프에이 일을하고있다 :

:

다음

<div class="pages-thumbs"> 
    <?php $cat_id = 19; $cat_link = get_category_link($cat_id); ?> 
    <a href="<?php echo the_permalink(); ?>"><h2><?php the_title(); ?></h2></a> 
    <?php the_post_thumbnail('medium'); ?> 
    <div <?php post_class(); ?> id="post-<?php the_ID(); ?>"> 
    <?php the_excerpt(); ?> 
    </div> 
    </div> 

, 이것이 내가 왼쪽 상단에 정렬하는 배지 일을하기 위해서 H2 (CSS)을 위해 무엇을한다

.home-thumbs h2 { 
    background: url("images/top-left-label.png") no-repeat scroll left top #CBCBCB; 
    font-size: 12px; 
    margin-left: -8px; 
    margin-top: -66px; 
    max-width: 268px; 
    padding-left: 12px; 
    position: absolute; 
} 

이가 이제 CSS를 기반으로 어떻게 내가 가진 : 나는 BG를 움직일 수있을 것하지 않는 는

나는 다른 방법을 시도해야 내 h2 밖에서 png?

Answer 1

모서리로 배경 이미지를 줄입니다. 그런 다음 CSS를 다음과 같이 수정하십시오.

.home-thumbs h2 { 
    background: url("images/top-left-label.png") no-repeat scroll left top; 
    font-size: 12px; 
    margin-left: -8px; 
    margin-top: -66px; 
    max-width: 268px; 
    position: absolute; 
} 

    .home-thumbs h2 span { 

     width: inherit; 
     background-color: #CBCBCB; 
     padding-left: 12px; 
     margin-top: HEIGHT OF H2 BG IMAGE; 

    }