img outside div

Question

У меня есть следующее:

.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;

Я только хочу получить этот маленький png с вырезанным углом за пределами моего div, но не могу этого сделать. Как мне это сделать, чего мне здесь не хватает ?!

Под div подразумевается заголовок над изображением. У меня та же проблема с подсказкой из отзыва, я не могу использовать нижнюю часть со стрелками и обычными границами, так как, опять же, мой img не будет отображаться за пределами содержащего div.

Спасибо.

P.S. HTML & PHP ..

<div id="home" class="home-thumbs">
  <?php query_posts('cat=19&posts_per_page=1'); 
  if(have_posts()) : while(have_posts()) : the_post(); ?>
  <p class="cat-title"><?php echo single_cat_title();?></p> <?php the_post_thumbnail('medium'); ?>
    <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
      <h2><?php the_title(); ?></h2>
        <?php $cat_id = 19; $cat_link = get_category_link( $cat_id ); ?>
        <?php the_excerpt(); ?>
        <a href="<?php echo $cat_link; ?>">More in this section</a>
    </div>
  <?php endwhile; endif; wp_reset_query(); ?>  
</div>

Answer 1

Вы позиционировали его абсолютно, поэтому используйте top и left, как и положено

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

Answer 2

Попробуйте overflow:visible на содержащий <div>.