Changin The Portland Background

The <link> element is for inserting stylesheets; you're trying to link your image as a style sheet rather than embed an image. First, upload your image to your workspace in the images folder. Are you trying to change the background image or an image in the page?

For a background image, go to your css file. Under the header selector, change the url for "background" like this (my image is hawaii.png, in the images folder):

header {
  text-align: center;
  background: url('images/hawaii.png') no-repeat top center;
  background-size: cover;
  overflow: hidden;
  padding-top: 60px;
}

For an image in the file, find the <img> element in the html and add your image file name into the src="" part. For mine, I uploaded an image of a Hawaiian beach, file name hawaii.png, so my code looked like this:

 <header>
      <img src="images/hawaii.png" alt="Hawaiin beach with double rainbow" class="profile-image">

Hope I said that right, haha.

Remember you're modifying an HTML element. You're not linking a picture. You're modifying the Header element. Use this resource to go over CSS background property https://www.w3schools.com/css/css_background.asp

step 1: select the header element in your CSS within your stylesheet

header {


}

step 2: target the background image property

header {
background-image:

}

step 3: set the background property value to the image file path

header {
background-image: url('images/hawaii.png');

}

step 4: set the background repeat property

header {
background-image: url('images/hawaii.png');
background-repeat: no-repeat;
}

step 5: set the background position property

header {
background-image: url('images/hawaii.png');
background-repeat: no-repeat;
background-position: center;

}

step 6: set the background size property

header {
background-image: url('images/hawaii.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;

}