filledat filledat - 8 days ago 6
CSS Question

Multiple Checkboxes in a Picture

i know how to put a picture in one checkbox (via css)

but this example:
checkboxes

I want to put Checkboxes into the picture at every number exactly at this position. The checkboxes can also be next to the picture but at the exact positions.

How we do this ?

Thank you for your help

Answer
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.pic{
background: url("https://i.stack.imgur.com/aS3WP.jpg") no-repeat;
width:242px;
height:197px;
position: relative;
}
.poin1{
left: 165px;
bottom:50px;
position: absolute;
}
.poin2{
left: 165px;
bottom:90px;
position: absolute;
}
.poin3{
left: 155px;
bottom:125px;
position: absolute;
}
.poin4{
left: 180px;
bottom:122px;
position: absolute;
}
</style>
</head>
<body>

<div class="pic">
<input type="checkbox" class="poin1">
<input type="checkbox" class="poin2">
<input type="checkbox" class="poin3">
<input type="checkbox" class="poin4">

</div>


</body>
</html>

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    .pic{
    background: url("https://i.stack.imgur.com/aS3WP.jpg") no-repeat;
    width:242px;
    height:197px;
    position: relative;
    }
    .poin1{
    left: 165px;
    bottom:50px;
    position: absolute;
    }
    .poin2{
    left: 165px;
    bottom:90px;
    position: absolute;
    }
    .poin3{
    left: 155px;
    bottom:125px;
    position: absolute;
    }
    .poin4{
    left: 180px;
    bottom:122px;
    position: absolute;
    }
    </style>
    </head>
    <body>

    <div class="pic">
    <input type="checkbox" class="poin1">
    <input type="checkbox" class="poin2">
    <input type="checkbox" class="poin3">
    <input type="checkbox" class="poin4">

    </div>


    </body>
    </html>