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:
and in the HTML:
<!--Title Banner Section-->
<div class = "banner bold">
<h1>Dasmoto's Arts & Crafts</h1>
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?
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.
What is your file structure in relation to the css file and the resources folder?
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:
<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.