Place Radio Buttons over image

Question

I am trying to place some radio buttons over an image at an exact location. I have placed both in a Div but I am not sure what to do next. Here is where I want the radio buttons to be placed (red circles):

Here is my code so far:

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

body {
  background-color: #979797
}

<div class="general">
  <img src="https://via.placeholder.com/300" class="center">
  <form action="">
    <input type="radio" name="answer 1" value="apple">
    <input type="radio" name="answer 2" value="chicken">
    <input type="radio" name="answer 3" value="carrot">
  </form>
</div>

Thank you so much in advance!

`The bgcolor attribute is not supported in HTML5. Use CSS instead.` I cannot understand anything from the picture you provided. Please be more specific about the position of the radio buttons. I will edit your code in the mean time — Mihai T, Jan 17 '19 at 12:07

score 4 · Answer 1 · answered Jan 17 '19 at 12:22

I would put the radio buttons in one div each and then give the div a background. Like this:

<html>
<head>
 <style>
  .general{}
    .center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%;
    }
    .radio-size {
      height: 100px;
      width: 100px;
    }
    .bg-apple {
      background-image:url('https://images.unsplash.com/photo-1513677785800-9df79ae4b10b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
      background-size: cover;
    }
    .bg-chicken {
      background-image:url('https://images.unsplash.com/photo-1426869981800-95ebf51ce900?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
      background-size: cover;
    }
    .bg-carrot {
      background-image:url('https://images.unsplash.com/photo-1445282768818-728615cc910a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
      background-size: cover;
    }
    
 </style>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body bgcolor="#979797">
 
<div class="general">
<img src="https://images.unsplash.com/photo-1518796745738-41048802f99a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="center" style="width:20%;" >
 

  <form action="" style="background-img:url("")">
    <div class="radio-size bg-apple">
      <input type="radio" name="answer 1" value="apple">
    </div>
    <div class="radio-size bg-chicken">
      <input type="radio" name="answer 1" value="chicken"> <br>
    </div>
    <div class="radio-size bg-carrot">
      <input type="radio" name="answer 1" value="carrot"> 
    </div>
  </form>
</div>
 

</body>
</html>

note: The radio-buttons are all supposed to have the same "name" atribute, so that you can only choose one of them. If you want to be able to select multiple options, you should use checkbox instead.

Sebastian Brosch · Answer 2 · 2019-01-17T12:33:34.647

You can use the following solution using flexbox:

body {
  background:#979797;
}
.question {
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
}
.answers {
  display:flex;
  flex-direction:column;
}
label.answer {
  position:relative;
  height:100px;
}
label.answer input[type="radio"] {
  top:0;
  left:0;
  position:absolute;
}

<form action="">
  <h2>Question 1:</h2>
  <div class="question">
    <img src="https://picsum.photos/300">
    <div class="answers">
      <label class="answer">
        <img src="https://picsum.photos/100">
        <input type="radio" name="answer1" value="apple">
      </label>
      <label class="answer">
        <img src="https://picsum.photos/100">
        <input type="radio" name="answer1" value="chicken">
      </label>
      <label class="answer">
        <img src="https://picsum.photos/100">
        <input type="radio" name="answer1" value="carrot"> 
      </label>
    </div>
  </div>
  <h2>Question 2:</h2>
  <div class="question">
    <img src="https://picsum.photos/300">
    <div class="answers">
      <label class="answer">
        <img src="https://picsum.photos/100">
        <input type="radio" name="answer2" value="apple">
      </label>
      <label class="answer">
        <img src="https://picsum.photos/100">
        <input type="radio" name="answer2" value="chicken">
      </label>
      <label class="answer">
        <img src="https://picsum.photos/100">
        <input type="radio" name="answer2" value="carrot"> 
      </label>
    </div>
  </div>
</form>

score 2 · Accepted Answer · answered Jan 17 '19 at 12:15

Even though you say you want them over your image, in the picture you shared the radio buttons appear to be on the right side of the image. So i am a bit confused about what you actually want.

But i made a simple example below. You can position them how you like or comment below if you want my help.

P.S. as i said in my comment : The <body> bgcolor attribute is not supported in HTML5. Use CSS instead.

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

body {
  background-color: #979797
}

form {
  position:absolute;
  right: 25%;
  top: 50%;
  transform:translateY(-50%) translateX(100%);
  display: flex;
  flex-direction: column;
}

.general {
  position: relative;
}

<div class="general">
  <img src="http://via.placeholder.com/640x360" class="center">
  <form action="">
    <input type="radio" name="answer 1" value="apple">
    <input type="radio" name="answer 2" value="chicken">
    <input type="radio" name="answer 3" value="carrot">
  </form>
</div>

Code_Ninja · Answer 4 · 2019-01-17T13:15:45.717

I think you should try the following type of code for the above query. I have changed you HTML structure and have changed your current CSS completely:

.general{
  width: fit-content;
}
.img{
  display: flex;
  align-items: end;
}
img{
  border: 1px solid black;
}
body {
  background-color: #979797
}
.options{
  display: flex;
  flex-direction: column;
}
.radio{
  position: relative;
  height: 50px;
}
input[type="radio"]{
  position: absolute;
  top: calc(50% - 4px);
  right: 0;
  margin: 0;
}

<div class="general">
  <form action="">
    <div class="img">
      <img src="https://via.placeholder.com/150" class="center">
      <div class="options" class="center">
        <div class="radio">
          <img src="https://via.placeholder.com/50">
          <input type="radio" name="answer1" value="apple">
        </div>
        <div class="radio">
          <img src="https://via.placeholder.com/50">
          <input type="radio" name="answer1" value="chicken">
        </div>
        <div class="radio">
          <img src="https://via.placeholder.com/50">
          <input type="radio" name="answer1" value="carrot">
        </div>
      </div>
    </div>
  </form>
</div>

Remember that if the questions only have a single answer then, the name of the radio box should be same and the value should be different. Otherwise, all the radio buttons will get selected simultaneously and cannot be unselected.

I hope this code is helpful. Thanks.

Place Radio Buttons over image

4 Answers4

Linked