Background-Image Not Loading

Hi,

I’ve come a bit unstuck with the Dasmoto’s Arts and Crafts project in the Intro to Local Web Development module. I’ve got everything working with it, except I can’t get the background image for the main title banner to show. I’ve checked, double and triple checked my path definitions in the background-image url attribute but I can’t find any errors. Indeed, I’m using VSCodes auto fill options to navigate to the file, so it should be recognising it (doing this as a seperate img element in the html index file results in the image being displayed fine). Can anyone identify something I’m missing here? My CSS code for this bit is:

.banner {
background-image: url("./resources/images/pattern.jpeg");
background-color: slategray;
font-size: 100px;
color: khaki;
text-align: center;
}

and in the HTML:

<

<!--Title Banner Section-->
<div class = "banner bold">
    <h1>Dasmoto's Arts & Crafts</h1>
</div>

Thank you!

1 Like

I managed to fix this by replacing the relative path with the internet url of the image. However, this still feels like it’s a problem. Should I not be able to use background-image with images that are stored locally?

I believe you should be able to. I don’t use the projects, I am broke, however, it seems like you can’t use files on your local storage. Also, what do you mean “local storage?” Is it on Codecademy or on your PC?

1 Like

By local storage I mean on my PC. I am using VSCode on a Chromebook which means I have to use the linux storage which might be why its causing the issue. However, all the other images that I have stored in the same directory load (albeit with the element rather then background-image which I haven’t checked) and are displayed correctly.

Yeah, there’s probably some special thing going on with the background-image. You may have to do some research to find an alternative.

1 Like

What is your file structure in relation to the css file and the resources folder?

Hi,

I was really struggling with this as well. But after some extensive experimenting I managed to get it done with the relative path of the image:

HTML:

<h1 style=background-image:url(Resources/images/pattern.jpeg);background-repeat:no-repeat;height:130px;>Dasmoto's Arts & Crafts</h1>

However, I’m super new at coding so I don’t know if this code would even be acceptable.