レスポンシブデザインでラジオボタンを画像の指定した位置に表示させたい

CSS初心者です。
今私はサイトを作っているのですが、レスポンシブに対応したデザインを組んでみたいと思っています。
ラヂオボタン

やりたいことは

背景画像を縦横比を固定して横幅100%で表示する(スマホでも横幅100%で開く)
画像のスマホ画面の位置にラジオボタンを設置する(スマホでもPCでも任意の位置に表示させる)
ラジオボタンの大きさを状況に応じて変える

ということです。

今までCSSについて調べて、背景画像を横幅基準で画面いっぱいに表示させる方法を探していました。
以下のサイトを参考に組んでみたのですが、PCでは横幅いっぱいに表示することはできたのですが、やはりスマホでの表示はうまくいきませんでした。

[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック | コリス
 縦横の比率維持で迷うのはもうやめよう！

ラジオボタンは絶対位置で配置すれば解決すると思ったのですが、背景画像の位置が安定しないのでできませんでした。

ラジオボタンはPCで見ると案外使えないこともありませんが、スマートフォンでサイトを見るととても小さく使うことが難しかったので、大きくしてみたいです。
下記サイトなど、ラジオボタンのサイズを変える方法を知ることはできたのですが、状況に応じて変える事ができませんでした。
チェックボックスやラジオボタンを大きくする方法: 小粋空間

サイトのソース、またはgithubのページを見て、ご回答いただければ幸いです。
GitHub - Hib3/radio
よろしくおねがいします。

HTML
1<!doctype html>
2<html>
3<head>
4
5<!--CSS -->
6<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
7<!--JS -->
8<!--bootstrapとJQuery-->
9<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
10<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
11<meta charset="utf-8">
12<title>ラヂオボタン</title>
13
14<style type="text/css">
15body {
16
17  width:50%;
18
19  /* 画像ファイルの指定 */
20  background: url(image/bg.png) 0 0 no-repeat;
21   
22  /* 画像を常に天地左右の中央に配置 */
23  background-position: center center;
24    
25  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
26  background-attachment: fixed;
27   
28  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
29  background-size:cover;
30     
31  /* 背景画像が読み込まれる前に表示される背景のカラー */
32  background-color: #ffffff;
33  
34}
35body::before{
36  content: '';
37  display:block;
38  padding-top:50%;
39}
40
41input[type=radio]:focus {
42  box-shadow: 0 0 30px royalblue;
43  border-radius:20px;
44}
45input[type=radio]:focus:checked{
46  box-shadow:none;
47}
48input[type=radio] {
49border: 0px;
50width: X;
51height: X;
52}
53
54<body>
55
56ラヂオボタン<br>
57
58<audio id="music" preload="none">
59  <!--autoplay onコントローラーなし-->
60  <source src="http://37.220.36.53:7904/;?type=http&amp;nocache=18236" type="audio/mpeg">
61</audio>
62
63<ul class="container">
64<div class="button">
65 <input name="checkit" type="radio" onclick="a1()" class="radiobox-tremolo">
66 <input name="checkit" type="radio" onclick="a2()" class="radiobox-tremolo">
67
68※…a50まであります
69
70 <input name="checkit" type="radio" onclick="a50()" class="radiobox-tremolo"> <br>
71</div>
72</ul>
73<script>
74</script>
75</body>
76</html>

m.ts10806

2018/08/26 12:46

コードは質問本文に直接提示してください。外部サイト利用は結構ですが、何かでそのサイトが参照できなくなったときに必要な情報が確認できなくなります

_hbk

2018/09/04 08:14

かしこまりました。一応現在試行錯誤しているのですが、その変更点を貼ると却って混乱のもとになりそうなので、作った当時のコードを貼ろうと思います。ご回答いただければ幸いです。

m.ts10806

2018/09/04 08:15

あと、質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。

m.ts10806

2018/09/04 08:16 編集

質問を編集してからコメントいただけると助かります。

_hbk

2018/09/04 08:17

すみません。コードが入り切りませんでした。githubは常に残しているのでそちらで確認いただければ幸いです。

m.ts10806

2018/09/04 08:19 編集

最初の指摘とは関係ないですが、Githubが確認できない特殊な環境下のため、現状のままですと本件の回答は難しそうです。関係ありそうな箇所、現象確認できる最小構成でも提示難しいですか？

m.ts10806

2018/09/04 08:20

回答依頼を投げられているようですが、既についた回答では解決できなかった場合、その旨も記載されたほうが良いです。何の追記もなく回答依頼だけ投げると困惑のもととなります。

_hbk

2018/09/04 08:24

かしこまりました。僕自身あまり理解していないのですが、その最小構成とはどのようなものなのでしょうか？

_hbk

2018/09/04 08:26

CSSの理解がまったくなく、調べているのですがちんぷんかんぷんで…とりあえずHTMLのラジオボタンとCSSの画像などの部分を貼ろうと思います。チャンネルやinnerHTMLの箇所は必要ないという認識でよろしいでしょうか？

行動規範の内容に同意します

回答2件

ヒント：

＠サイズ指定：calc()
＠単位「vw,vh,vmin,vmax」
＠横幅100%：background-size: contain;
＠配置：position: fixed, position: absolute
＠ボタンの見せ方：<input id="myname">, <label for="myname"></label>

投稿2018/08/26 15:22

liveasnotes

総合スコア1284

私も勉強中の身なので、合っているか分かりかねますが、
レスポンシブでデザイン勉強しておりますので、参考になるか分かりかねますが、
下記のようにソースコード貼られてみてはいかがでしょうか？

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

参考にしたページは下記になります。
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ

補足
viewport で指定してるのは長ったらしい値は、次のようになっている。

width = device-width
initial-scale = 1.0
minimum-scale = 1.0
maximum-scale = 1.0
user-scalable = no
この設定により、iPhone と Android でページの表示倍率が 1.0 固定にして、ページのピンチができないようにしている。

その結果、ページの表示倍率が変わる余地をなくしている。表示倍率が変えられない状態になってはじめて、WebKit は仕方なくページの横幅を変えてくれるようだ。