Background Images

Exercise

  1. Download the images from this GitHub repository:
    2. https://github.com/learn2buildapps/CSS_Background_Images/blob/main/images/big-game.jpg
    https://github.com/learn2buildapps/CSS_Background_Images/blob/main/images/small-game.jpg

  2. Create a new folder called "images" and place the two images you downloaded in there.
  3. In the "index.html" file, replace the code with the following:
<!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>CSS</title>
  <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
  <h1>Background Images</h1>
  <div id="big-game-image">
    <p>Big Game Image</p>
  </div>
  <div id="small-game-image">
    <p>Small Game Image - by default this image repeats</p>
  </div>
</body>

</html>
  1. Save.
  2. If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
  3. In the "styles.css" file, replace the code with the following:
div {
  height: 300px;
  color: white;
  border: 2px solid yellow;
}

#big-game-image {
  background-image: url('../images/big-game.jpg');
}

#small-game-image {
  background-image: url('../images/small-game.jpg');
}
  1. Save.
  2. In the browser, you should see the following:

    3. Exercise 2 Result

Code Walkthrough and Explanation


background-image: url('../images/big-game.jpg');

In CSS, the background-image property sets one or more background images for an element. This property takes a URL or a set of image files as its value. The images can be either a relative or absolute path to an image file, or a URL pointing to an image resource on the web. The background image is placed in the content area of the element by default, and the element's padding, border, and margin areas are drawn on top of it.


Experiment with the Code


Video and Code References


Questions? Subscribe and ask in the video comments:




GitHub and Other References