Building an HTML/CSS page but images won't load

user_11660893 0
Viewed 283

I'm building my first website in HTML/CSS but for some reason none of my images show up when I load the HTML files in Chrome. When I hit F12 and go to the 'sources' menu, I can see that my index.html file (where the images should be loading) is creating errors saying the files can't be found (net::ERR_FILE_NOT_FOUND), even though I used Visual Studio's file picker to navigate to them instead of manually typing the addresses.

Here's a link to the file in case that helps provide more context (area in question is the box at the bottom of the page): [redacted]/

I've tried clearing out my code from the css stylesheet, verifying the image addresses but unfortunately that's all I know to try at this point in my learning.

HTML for the box where I want to put the image background:

<div class="p-box">
<h1>Hello</h1>
<h2>Goodbye</h2> 
</div>

CSS for that box's class:

.p-box{
    width: 800px;
    height: 500px;
    border: 1px solid #000000;
    margin-top: 30px;
    position: relative;
    background-image:url('/css/images/download.jpg'); 
   }

The goal is to get an image to load inside the 'p-box' container but nothing happens when I save and refresh the file in my browser.

This is my first site (and my first post here), so any feedback is greatly appreciated. Thanks!

css image html
3 Answers

It appears you either figured it out or something else is blocking it on your side. I can clearly see http://[site name redacted].com/css/images/download.jpg has an image. I can as well see the bottom of the page that says Hello and Goodbye overlayed on the picture.

Best of luck with your project!

user_116732810

You could have a issue with where the html file is located. You might only need to change the url for the image to: 

background-image: url('../css/images/download');

If your html file is inside the css folder or images folder it wont load correctly.

if all else fails just do this:

background-image: url('http://connerring.com/css/images/download.jpg');
user_97208540

Looks like you're loading an image from your drive instead of a local path for check.png

in your css, find this:

list-style-image: url('E:\Desktop\HTML and CSS\CSS Tutorial Files\css\images/check.png');

and change to

list-style-image: url('/css/images/check.png');

Here is some good information on learning about file paths in the browser

user_8373650
Related