CSS background-image doesn't work

HTML-CSS
1

The image does not appear in the background.
(Browser: Brave/FirefoxDevEdition)

header {
background-image: url(C:\Users\ricardo\Desktop\SushiBarWebsite\368725.jpg);

I copy and past the URL that Visual Studio Code give me when i open the image in this editor, can’t be a mistake.

Any sugestion?

2

Can you see any error messages in your dev tools? Usually, you have to give permission for a browser to access any files located on your computer.

3

There is not messages, the problem is not the browser :frowning:

4

Have you tried wrapping the path in quotation marks " "?

5

Yes, i have ALL in the same folder.

7

sufrir
sufrir613×556 17.4 KB

Its too simple but i dont know what it fails.

8

you used the wrong css property. There is no background-image command in there.
try using just the plain background css command.

Solution

background: url("C:\Users\ricardo\Desktop\SushiBarWebsite\368725.jpg");

9

If it’s in the same folder as the project try just putting the path to the image from the project folder:

background-image: url("./368725.jpg")
10

In VS Code there is “background-image: url()”. Thanks, but still not working.

11

Thanks a lot Austin but still not working.

12

Huh. can you send me the link the the challenge that you are doing?

13

There is not a challenge. Its a mini project, im learning but this is frustrating. You can see all my code in the Image above.
or copy and paste the code:

    <title>Sushi Bar</title>
</head>
<body>
    <header>
        <div class="hero">
            <h1>Goodbye Junkfood!<br>Hello Sushi!</h1>
        </div>
    </header>
</body>

/*CSS BELOW*/
* {
    margin: 0;
    padding: 0;
}

body {
    font-family: tahoma;
}

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

header {
    background-image: url(../368725.jpg);
    color: red;
}
14

put quotes around the url or file image in the url() selector.

15

I have already tried with all kinds of quoetes and slashes. Still not working.

17

Might be a simple question but how are you putting the CSS into the HTML? Are you using a separate CSS file or are you using style tags?

Also if it is in the same folder and you put ../368725.jpg; it is going out of the folder you are in. Just put

background-image: url("./368725.jpg");
18

Is the rest of your css working? Are you wrapping your css in style tags?

19

You can ask what ever you want. Separate CSS file.
ACHETEEME

20

Yes, the rest works perfectly. The CSS and HTML are separated. Look the image in my most recent respond. Thanks.

21

Try to add the style as a class and not to the element directly, just to test. Of course you will have to add the class to the header element. And keep the quotes around the file name, in case you forgot to put them back

23

Sorry, i don’t understand, can you show me?
Here CSS code:

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: tahoma;
}

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

header {
    background-image: url(../368725.jpg);
    color: red;
}