Issue with image width CSS

Question

I have a problem with my triangle buttons and it images. Here you are the code >

[http://codepen.io/Luiggi/pen/elACq?editors=110][1]

Here you are an image to understand my problem. How to positioning the buttons and the image inside of it.

I hhope that somebody can help me. Thanks a lot,

Luiggi

Answer 1

If I hear you aright you need buttons like images? For it you can use input with type button and src attribute. Smth like the following:

<input type="image"  src="http://placekitten.com/g/300/150">

And then you have to position (I think absolute is better) them in container that wraps your image. You will have smth like:

<div class="wrapper">
    <img src="/i/image.jpg">
    <input type="image"  src="/i/btn1.png" class="btn1">
    <input type="image"  src="/i/btn1.png" class="btn2">
</div>

and CSS:

.wrapper { position: relative; }
.wrapper .btn1 { position: absolute; bottom: 0; left: 0;}
.wrapper .btn2 { position: absolute; bottom: 0; right: 0;}