Place div with image on another div

Asked

Viewed 880 times

1

I’m trying to apply a solution in a div in my project, but I’m not succeeding, I did a test in Jsfiddle worked, as can be seen here, by my limitation in css I’m having difficulty implementing.

.produtos-wrapper{
   position:relative;
}
.imagem-mascara {
   width:100px; /* largura da imagem máscara */
   height:68px; /* altura da imagem máscara */
   position:absolute;
   top:0;
   left:0;
   background:url(http://moveissaobento.com.br/msb/imagens/tag-lancamento.png) 0 0 no-repeat; /* imagem máscara */
}
<div class="produtos-wrapper">
   <img src="http://moveissaobento.com.br/msb/imagens/img.png" width="191" height="117" border="0" />
   <div class="imagem-mascara"></div>
</div>

Jsfiddle

And I need to apply on my website in this case here:

Page for display

See that the image is in the top corner of the site.

css

  • Try using selectors like :before or :after in your css, it might help, search and test :) Tip: http://tableless.com.br/como-usar-before-after/

1 answer

3


You forgot to put position: relative; in class .produtos-wrapper of your website. 

.produtos-wrapper{
   position:relative;
}

This makes the Divs with position: absolute; inside .produtos-wrapper stand with the position relative to this.

It’s working exactly as your example in Jsfiddle.

  • Very good... I was already thinking of readaptar to use with selectors :before... kkk, maybe it’s my way of working even if it influences the decision or my little knowledge of css too.

  • Hello @André Ribeiro, just one more question, the image not being repeated as it should, did I committed some fault?

  • @adventistapr as so repeated?

  • Hello @André Ribeiro, is that these images are inside a loop and is not repeating, when resizing the browser it appears repeated.

  • @adventistapr Add position:relative also to his class .produtos-conteudo. Seems to solve the problem.

  • Grande, super, hiper ajuda, valeu mesmo @André Ribeiro

Show 1 more comment

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.