CSS background-image doesn't work

did you try wrapping it in quotes and getting rid of the first period for the URL.

background-image: url("./368725.jpg"); /* Just one period here not two */
1 Like

Sorry, since last night i been trying all the combination with “” or ‘’ or … or / or \ with URL or local, still doesn’t work.

doesn’t work i been trying all the combinations :confused:

What I mean is:

.header_image {
    background-image: url(‘368725.jpg’);
    color: red;
}

<header class=‘header_image’>

Sorry Curtin, i’m trying with diferent images, diferent sizes and nothing works. I wanna die. It works to you if you copy and paste the CSS and HTML? can you take a capture of the result?

You can also add your project to codepen so we can see everything

1 Like

I agree as well, we’d probably figure this out much faster.

Are you sure the header element is not just collapsed (0 height). If you give it a height can you see the image?

background-size: cover;
height: 100vh;
1 Like

This does work I just tested it and Iasjorg is correct add height and the other suggests as well

<style>
  * {
      margin: 0;
      padding: 0;
  }

  body {
      font-family: tahoma;
  }

  header {
  height: 100%;
      color: red;
      background: url("atomeditor.jpg");
  }

  .hero {
      position: absolute;
      width: 1140px;
      top: 50%;
      left: 50%;
      transform: translate(-40%, -50%);
  }


</style>




<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>testing</title>
  </head>
  <body>
    <header>
        <div class="hero">
            <h1>Goodbye Junkfood!<br>Hello Sushi!</h1>
        </div>
    </header>
  </body>
</html>

2 Likes

OMG THANKS IT WORKS.

THANKS TO EVERYONE, you guys are very nice people!

I have to study a lot to not do this kind of mistakes again.

REALLY THANKS TO EVERYONE!

1 Like

one small point to add…use caution with any *{}

1 Like

Dang I was about to put pretty much the same thing. Glad we got this figured out!

1 Like

Great, good to hear it is working.

I would suggest learning the browser developer tools (Video). The DOM Inspector is super helpful.

1 Like

Check your .hero class. It might be overwriting something of the header, for cascade. Then, did you close the curly brace } ?

Thank you for the thread. I’ve been struggling with this issue too.

Thank you! I’ve been looking for a solution for this problem too. But there is also another problem. The background image has been applied, but the text color and font family haven’t. Do you have an idea where the problem lies?
Capture

i have also the same problem
but not recover it after applying your code

i have same problem and i getting trouble in finding solution

You declared a class called “.header-image” which you didn’t applied to your html. Have you tried <h1 class=“header-image”> Goodbye.../// </h1>?

hey guy,
i had same problem with you, but after that, i found the right code for this problem.
“body {
background-image: url(”…/…/resources/css/hero.jpg");
background-color: rgba(255, 118, 0, 0.78);
background-size: cover;
background-position: center;
height: 100vh;"

1 Like