Need help with background image not covering the entire background and aligning rr

[ohersi1]

My background image is not covering the entire page especially as my form got longer towards the bottom and secondly I can’t figure out how to align my radio buttons to the left like I aligned my normal input boxes. I’ll attach screenshots thank you.

body {
	background-image: url("https://images.pexels.com/photos/2338407/pexels-photo-2338407.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: cover;
	height: 100vh;
	font-family: "Poppins", sans-serif;
	font-weight: bold;
	color: black;
  display: flex;
  flex-direction: column;
}

[xoxoKaralee]

it would be more helpful if we could see the entire code. do you have a codepen you could link?

[ohersi1]

Yes here you go and thank you in advance https://codepen.io/ohersi1/pen/ZEXZMPX

[rio_sanap]

use background height to 100vh and background width to 100%

[Jimbalin]

the issue is with your id section which has a position top of 100px

[LucLH]

You can check the background-attachment property which have few values such as scroll and fixed. By default, the value of this property is scroll, that’s why you have this. So try to check the other possibilities and you will have what you are searching for.

[ohersi1]

Thank you so much your solution sorted my problem. Could you also help me with aligning my radio buttons to the left of the container I couldn’t find a solution for that thank you

[LucLH]

Your welcome @ohersi1, happy that it worked! About your radio alignement, do you mean you want them in column at the left? Sorry, I am not sure I understood well your question

[ohersi1]

I need my radio buttons to align left like this hope the screenshot helps thank you

[LucLH]

I watched the result you have in your first pictures. You have a CSS definition that makes your radio buttons be centered. Also, label and input are inline block type. According to you, how could you align one radio button and his text on the same line?

You have many possibilities, you could for example created a div or section, between the start of your radio list to his end, and then created div for each label/ input, for that they become blocks. This is only one way, they are many ways, with CSS too with the property display and the value block for example.

Example for the div:

<div id="first-radio-list">
  <div id="definitely-radio">
    <input type="radio" id="definitely" value="Definitely">
    <label for="definitely"> Definitely</label>
  </div>
etc...
</div>

After, you just need to check the align from left to right and it will be fine normally

[rio_sanap]

<input type="radio" name="firstradio"> first radio<br> 
<input type="radio" name="secondradio"> second radio

you want like this one , if i didn’t guess wrong
just use <br> which is used for braking something

[Abe1]

For the background image try using,
-background-position: contain;

The radio buttons try using.
the display inline css property.