Background image is not loading from internet

Question

I am new to coding and I'm trying to set an image as the background on my CSS page. I can get the background to change colors, but when I try to use an actual image, nothing loads.

#background-first-page {
  background-image: url ("https://images.unsplash.com/photo-1589401774008-64bcae0af959? 
 ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mjc3fHxzcHJpbmclMjBmbG93ZXJzfGVufDB8fDB8&ixlib=rb- 1.2.1&auto=format&fit=crop&w=500&q=60");
 height: 100vh;
}

body {
  color: blue;
  font-family: 'Cormorant Infant', serif;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300&display=swap" rel="stylesheet">

<div class="container-fluid" id="background-first-page">
  <h1>Beckett Wedding</h1>
  <div class="container-fluid">
    <div class="row">
      <div class="col-2"> <a href="thebrides.html"> The Brides </a> </div>
      <div class="col-2"> <a href="thebridalparty.html"> The Bridal Party </a> </div>
      <div class="col-2"> <a href="RSVP.html"> RSVP </a> </div>
      <div class="col-2"> <a href="Directions.html"> Directions </a> </div>
      <div class="col-2"> <a href="Details.html"> Details </a> </div>
      <div class="col-2"> <a href="Gifts.html"> Gifts </a> </div>
    </div>
  </div>
</div>

What am I doing wrong?

Answer 1

Delete the whitespace between url and ("image-url");.