Image Path not working

The following code is not showing the image:

@import 'D:/Programming/Ecommerce/public/css/nav.css';

.hero-section{

    width: 100%;

    height: calc(100vh - 120px);

    background-image: url('D:/Programming/Ecommerce/public/img/header.png');

    background-size: cover;

    display: flex;

    justify-content: center;

    align-items: center;
}

I have tried the one showing on the tutorial as well:

@import 'nav.css';
background-image: url('../img/header.png');

image

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

Can you verify the image path? As in, is the image actually located by that link?

yes image is located on the path and VS is not showing any error but there is no display

So nothing shows up in the dev tools either when you look at the image tag?

Sorry didnt get you. What do you mean by dev tools?

Here is the image path:

Here is console

i have tried both backslash in the path as well

try with another image , get one from unsplash but keep the image on your desktop make it easy to excess and make sure u have all the extensions you need to complete the task.

Other images on the same path are working fine

But these are in .js file

Do i need to add any extension for CSS in VS?

yes get extensions for css and then try to see if you can get any examples from codepen its very helpful with this issues

I would suggest you create a Github repo with the code so people can test it.

As an aside, I would recommend you always use relative paths. There is no point in using absolute paths that will only work on your system as that is not where the code is going to run in the end.

2 Likes

I am practising this tutorial : B01K9AE5OW

Complete code will be available once i will complete it. All images are in one folder.
image

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.