In addition to what other people already commented on your question, it is worth noting that the filepath must be relative to the css file’s location.
Say your entire project is in a folder named root, and css is located in root/css/styles.css but image is in root/image/concert.jpg, then, from your stylesheet, you should call the image like background-image: url("../image/concert.jpg");
Like @David Alsbright said, you should check the development tools console of your browser. It will help you determine if there’s a problem with the file path.
Solution 1 :
Problem :
I am currently building a website and ran into a issue with my code. I am trying to set an image as a background for my header. I have checked the path to my image, the spelling of everything, and have checked my syntax online. Everything seems to match, so I don’t understand why my image is not popping up. Any help you guys can give would be amazing. Thank you. Below is my css code:
header {
text-align: center;
background-image: url("image/concert.jpg");
background-size: 700px;
height: 333px;
width: 500px;
}
Comments
Comment posted by Johannes
must be the filepath, I guess – CSS seems okay – at least sufficient to display part of a background-image
Comment posted by David Alsbright
Check your browser development tools console, is there an error? Do the other CSS properties for the style block get applied?
Comment posted by Jacob Lockard
You are using a
Comment posted by WaterHearts
Thank you for your suggestions. I have double checked the file path and everything looks good there. I still can’t get the image to pop-up though. Every other CSS property in the file gets applied and works. I am also using the
Comment posted by clesmalo
I’m glad I could help. I’d appreciate it if you could mark the answer as the accepted one =)
Comment posted by WaterHearts
Not a problem, I marked it! Sorry I forgot to at first