For expand the image to full height, you need to add the css html, body tags and set min-height: 100%. Then add properties to the body

html,
body {
  min-height: 100%;
}
body {
  font-family: 'lato', sans-serif;
  background-image: url('https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: 'lato', sans-serif;
  background-image: url('https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}

h2 {
  font-size: 26px;
  margin: 20px 0;
  text-align: center;
}

h2 small {
  font-size: 0.5em;
}

li {
  border-radius: 3px;
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}

.table-header {
  background-color: #95a5a6;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.table-row {
  background-color: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
}

.col-1 {
  flex-basis: 10%;
}

.col-2 {
  flex-basis: 40%;
}

.col-3 {
  flex-basis: 25%;
}

.col-4 {
  flex-basis: 25%;
}

@media all and (max-width: 767px) {
  .table-header {
    display: none;
  }
  li {
    display: block;
  }
  .col {
    flex-basis: 100%;
  }
  .col {
    display: flex;
    padding: 10px 0;
  }
  .col:before {
    color: #6c7a89;
    padding-right: 10px;
    content: attr(data-label);
    flex-basis: 50%;
    text-align: right;
  }
}

<div class="container">
  <h2>Responsive Tables Using LI <small>Triggers on 767px</small></h2>
  <ul class="responsive-table">
    <li class="table-header">
      <div class="col col-1">Job Id</div>
      <div class="col col-2">Customer Name</div>
      <div class="col col-3">Amount Due</div>
      <div class="col col-4">Payment Status</div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="Job Id">42235</div>
      <div class="col col-2" data-label="Customer Name">John Doe</div>
      <div class="col col-3" data-label="Amount">$350</div>
      <div class="col col-4" data-label="Payment Status">Pending</div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="Job Id">42442</div>
      <div class="col col-2" data-label="Customer Name">Jennifer Smith</div>
      <div class="col col-3" data-label="Amount">$220</div>
      <div class="col col-4" data-label="Payment Status">Pending</div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="Job Id">42257</div>
      <div class="col col-2" data-label="Customer Name">John Smith</div>
      <div class="col col-3" data-label="Amount">$341</div>
      <div class="col col-4" data-label="Payment Status">Pending</div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="Job Id">42311</div>
      <div class="col col-2" data-label="Customer Name">John Carpenter</div>
      <div class="col col-3" data-label="Amount">$115</div>
      <div class="col col-4" data-label="Payment Status">Pending</div>
    </li>
  </ul>
</div>

To resolve your query, the background-image property usually takes other properties along with it, to get the desired location of it with respect to overlying elements.Such as background-size, background-repeat or background-position etc. Try giving percentage values to background-size and background-position to place image at the center, if you desire so.

 body {
     font-family: "lato", sans-serif;
     background-image: url('./background.jpg');
     background-repeat: no-repeat;
     background-size: 140% 100%;
     background-position: 70% 100% ;
     width:100vw;
     height:100vh;
     overflow:hidden;
 }

Also, your body and html has not been given a height and width. So, the white space is created because the height of the image ends there.

remove the background property from the body and add this in pr0perties in container and remove minimum-width minimum-height properties from container class.

.container{
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: cover;
margin-left: auto;
margin-right: auto;
padding-left: 0px;
padding-right: 0px;

}

I’m trying to add a background to an HTML page that contains a container with rows. I took the style of the rows from the following link and edited it a bit (for example from scss to css in vscode) – link

In their example, there is no background but when I add background it seems to be shifted to the right for some reason and it does not fill the screen to the bottom (the white bottom section). It can also be seen on the rows that for some reason it displays a larger margin on the left side while in the original code it doesn’t.

Any ideas why it happens?

I use the following codes to do it:

Python + Flask:

from flask import Flask, url_for, render_template
from urllib.request import urlopen
from reading_data import read_hiscore
import json

app = Flask(__name__)

headings = ("name", "role", "salary")

data = (
    ("a", "aa", "55", 6),
    ("b", "bb", "60", 6),
    ("c", "cc", "65", 6),
    ("a", "aa", "55", 6),
    ("b", "bb", "60", 6),
    ("c", "cc", "65", 6),
)

@app.route("/")
def hello_world():
    return render_template("layout.html", headings=headings, data=data)

HTML:

<!DOCTYPE html>
<html>

<head>
  <title>Flask app</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>

<body>
  <div class="container">
    <h2>Responsive Tables Using LI <small>Triggers on 767px</small></h2>
    <ul class="responsive-table">
      <li class="table-header">
        <div class="col col-1">Job Id</div>
        <div class="col col-2">Customer Name</div>
        <div class="col col-3">Amount Due</div>
        <div class="col col-4">Payment Status</div>
      </li>
      {% for row in data %}
      <li class="table-row">
        {% for cell in row %}
        <div class="col col-1"> {{ cell }}</div>
        {% endfor %}
      </li>
      {% endfor %}
    </ul>
  </div>
</body>

</html>

CSS:

body {
  font-family: "lato", sans-serif;
  background-image: url(background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100%;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
  padding-right: 0px;
  min-height: 100%;
  min-width: 100%;
}

h2 {
  font-size: 26px;
  text-align: center;
  color: white;
}

h2 small {
  font-size: 0.5em;
  color: white;
}

.responsive-table li {
  border-radius: 16px;
  padding: 30px 30px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.responsive-table .table-header {
  background-color: blue;
  color: white;
  font-size: 14px;
  font-weight: bold;
  flex-basis: 25%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.responsive-table .table-row {
  background: blue;
  color: white;
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
}

.responsive-table .col-1 {
  flex-basis: 25%;
  text-align: center;
}

.responsive-table .col-2 {
  flex-basis: 25%;
}

.responsive-table .col-3 {
  flex-basis: 25%;
}

.responsive-table .col-4 {
  flex-basis: 25%;
}

@media all and (max-width: 100%) {
  .responsive-table .table-header {
    display: none;
  }
  .responsive-table li {
    display: block;
  }
  .responsive-table .col {
    flex-basis: 100%;
  }
  .responsive-table .col {
    display: flex;
    padding: 10px 0;
  }
  .responsive-table .col:before {
    color: #6C7A89;
    padding-right: 10px;
    content: attr(data-label);
    flex-basis: 50%;
    text-align: right;
  }
}