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 */

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