filledat filledat - 1 year ago 90
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 Source
<!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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download