Step 8

Let's add a background to our application! There are some cool backgrounds available at https://coolbackgrounds.io/. I have downloaded the Gradient Topography and renamed the downloaded file to background.svg.

Create a folder assets at the root of the project. Store background.svg in the assets folder.

Next, create a style.css file at the root of the project. Link the HTML file to this stylesheet:

<!DOCTYPE html>
<html lang="en">
<head>
   <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>Weather App</title>
+  <link rel="stylesheet" href="style.css"> 
</head>
<body>
  
</body>
</html>

Finally, add the following to the style.css file.

body {
  background: url(./assets/background.svg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Open the index.html using "live server."

CS280 Homepage

Step 8