I can't see the photo I added to my portfolio site

Question

I'm trying to create my own portfolio site using HTML and CSS. First, I want to show what I did in the index.

header {
  height: 46rem;
}

header.image {
  background-image: url('https://buffer.com/cdn-cgi/image/w=1000,fit=contain,q=90,f=auto/library/content/images/size/w300/2023/09/instagram-image-size.jpg');
  background-size: cover;
  background-position: center;
  height: 46rem;
  width: 100%;
  opacity: 0;
}

<header>
  <div class="image"></div>
  <div class="content">
    <h1>Kerimcan Uğurlu @kerimcan.ugurlu</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <a href="#" class="btn">Read More</a>
  </div>
</header>

As you can see from what I wrote, I think I did everything correctly, but the photos I added do not appear as the background. In fact, the photo I added does not appear at all.

Answer 1

1.) The selector needs to be header .image { ... } with a space in between to indicate that .image is a descendent element of header. (Without that space it would only select a header element which has an .image class itself)

2.) opacity: 0 will make the element fully transparent = invisible, so change that to another value...

header {
  height: 46rem;
}

header .image {
  background-image: url('https://buffer.com/cdn-cgi/image/w=1000,fit=contain,q=90,f=auto/library/content/images/size/w300/2023/09/instagram-image-size.jpg');
  background-size: cover;
  background-position: center;
  height: 46rem;
  width: 100%;
  opacity: 0.5;
}

<header>
  <div class="image"></div>
  <div class="content">
    <h1>Kerimcan Uğurlu @kerimcan.ugurlu</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <a href="#" class="btn">Read More</a>
  </div>
</header>

But I suppose you want to have that image as a background for the whole header element, so you shouldn't use a separate div for it, but instead define it as background-image for header itself (or maybe for header h1?):

header {
  height: 46rem;
  background-image: url('https://buffer.com/cdn-cgi/image/w=1000,fit=contain,q=90,f=auto/library/content/images/size/w300/2023/09/instagram-image-size.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
}

<header>
  <div class="content">
    <h1>Kerimcan Uğurlu @kerimcan.ugurlu</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <a href="#" class="btn">Read More</a>
  </div>
</header>