CSS Whats wrong with this

Having trouble getting the background image to display.

Works when i enter an external url but not with a local path


h1 {

font-family: Helvetica; 

font-size: 100px;

font-weight: bold;

color: khaki;

text-align: center;


.heading-background {

background: url("/images/pattern.jpeg");


1 Like
and a bunch more

All mean different things. Experiment with them and also you can right-click your page and click on the css file. The browser will tell you what directory it tried to access for your file and you see whether it’s really off or not .

1 Like


Tried a few but no luck yet. CSS file is linked as it has styled other elements.

Will try again tomorrow. :slight_smile:

No i mean, the jpg that is linked, you should click on that link.

You’ll get it! :slight_smile:

Cheers, tried loads but still does not work.

What’s your file path directory for the image?
What’s your file path directory for the the index.html?


C:/Projects/Dasmoto’s Arts & Crafts/Images/frames.jpeg
C:/Projects/Dasmoto’s Arts & Crafts/index.html

The same image is also on the page somewhere else and it’s address is


I’ll give you an example:

My index is in MainProject folder. It has a resources folder, that contains an images folder and a css folder.

From my css, to get into the the images I need to go one folder back and type in the url, so that would be:


If we change the scenario: My index is in MainProject folder. It has a resources folder and an images folder, my css folder is inside the resources folder.

Now I would have to go 2 directories back

More importantly, to look at what the issue is, inspect element is vital. You can click on the element that you’re targeting in the html, and then click the image link. It will tell you the path it tried if it failed, and it’s pretty easy to adjust from there:

1 Like

Oh well done It was the “…/…/images/frames.jpeg” one.

Many thanks for that.

1 Like

No worries! Glad to help.

1 Like

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