Search code examples
htmlcssimagebackground-imagesrc

HTML/CSS - Hiding part of an image source

What would be the best and most correct way of hiding part of an image source in an img tag

Say I have the following:

<img alt="" src="myimage.jpg" class="photo" />

My target is to have the image enclosed in a rounded corner container, which will obviously cover the corners of image at the top.

Should I just go and put an absolute positioned element on top of the image as if you're putting a cut-out paper on top of a photo or is there some kind of alternative?

Solution

  • If your intention is that the image gets rounded corners, you could just use border-radius on it. If you need the container to have the rounded corners and that the image gets clipped, use overflow: hidden for it.

    You can find a demonstration for it in this fiddle: http://jsfiddle.net/frozenkoi/hwDYV/

    What you want is something similar to this

    <div class="contact">
    <img src=http://jsfiddle.net/img/top-bg.png /><a href="#">Username</a>
</div>

    With this CSS:

    DIV.contact {background: silver; border-radius: 8px; margin: 10px auto 0 5px; width: 200px; text-align: center; overflow: hidden}
DIV.contact IMG {display: block; width: 100%; }

    Note that the image is just a blue rectangle.