Click here to Skip to main content
15,348,280 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I followed tutorials and everything and the bg image is still not responsive and does not cover the whole page here is my html if anyone has a idea it would be much appreciated:



<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Columns</title>
    <link rel="stylesheet" href="">
</head>
<body>
  <div class="bg-image img-responsive" style="background-image: url('webd2.png'); height: 100vh ;">
  <div class="row">
    <div class="col-lg-5 d-block mx-auto text-light ">
      
 <header class="header">
 
 <h1 id="title" class="">Help me make a survey</h1>
 <p id="description">In this short survey you will help me to actually learn how to make a survey page.</p>
 </header>
    </div>
</div>
 <div id="div1">
<div class="row">
 <div class="col-lg-5 d-block mx-auto text-light">
  
 <form id="survey-form">
     <div class="form-group">
   <label id="name-label">Name:</label>
 <input id="name" class="form-control" type="text" placeholder="Enter your name" required class="form-inputs"><br>
 </div>
 <div class="form-group">
 <label id="email-label">Email:</label>
 <input id="email" class="form-control" type="email" placeholder="Enter your email" required class="form-inputs"><br>
 </div>

 <div class="form-group">
 <label id="number-label">Age:</label>
 <input id="number" class="form-control" min="10" max="120" type="number" placeholder="Ur Age" class="form-inputs"><br>
 </div>
 
 <label for="keke" class="form=label">How long until I get some keke from this:</label>
 
 <select name="keke" id="dropdown" class="form-select">
     <option value="days">Days</option>
     <option value="months">Months</option>
     <option value="years">Years</option>
    
   </select><br>
 
 <label class="form-check-label" for="radio">What should I waste my time on the most:</label><br>
 <div class="form-check">
     <input class="form-check-input" type="radio" name="fav_language" id="HTML">
     <label class="form-check-label" for="html">
       HTML
     </label>
   </div>
   <div class="form-check">
     <input class="form-check-input" type="radio" name="fav_language" id="CSS" checked>
     <label class="form-check-label" for="css">
       CSS
     </label>
   </div>
   <div class="form-check">
     <input class="form-check-input" type="radio" name="fav_language" id="JS" checked>
     <label class="form-check-label" for="js">
       JS
     </label>
   </div>
   <div class="form-check">
     <input class="form-check-input" type="radio" name="fav_language" id="Other" checked>
     <label class="form-check-label" for="other">
       Other
     </label>
   </div>

 <label for="checkbox">What will I get out of this?</label><br>

<div class="form-check">
<input class="form-check-input" type="checkbox" value="Keke" id="option1">
<label class="form-check-label" for="option1">
Keke
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="Mace" id="option2" checked>
<label class="form-check-label" for="option2">
Mace
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="Nistaaa" id="option3">
<label class="form-check-label" for="option3">
Nistaaa
</label>
</div>





<div class="form-group">
 <label for="exampleFormControlTextarea1">Give me some tips on how to get dolla dolla bills from this</label>
 <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>


<input class="btn btn-primary" type="submit" value="Submit">

</form>

</div>
</div>
</div>
</div>
</div>
      
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
      
</body>


What I have tried:

I tried watching tutorials on it did everything they did and still did not work. I think it is due to my other html and use of bootstrap, like rows and cols.
Posted
Updated 24-May-22 23:05pm

1 solution

There are no bg-image or img-responsive classes in the Bootstrap 5 source. Since you haven't included any custom stylesheets, those classes are irrelevant. The only styles which apply to your element are the inline styles:
background-image: url('webd2.png'); height: 100vh;

That makes the element take 100% of the viewport height, but it will not alter the size of the background image.

Try:
HTML
<div class="vh-100" style="background-image: url('webd2.png'); background-size: cover;">
background-size - CSS: Cascading Style Sheets | MDN[^]
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900