Click here to Skip to main content
15,867,488 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[^]
 
Share this answer
 

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