My image is not displaying online, Displays in my local drive but not online pls help Options

[nickilo]

Hello guys! I am new here. I hope somebody with a kind heart help me with my problem in HTML.

First I uploaded my index.html file in this free hosting site.

My Index Page

At first it was ok because my image background appears perfectly. My index page is actually not yet finish. I added another element in the index page few days later. This is the start of the problem, because when I uploaded my updated index page it didn't update. Tried uploading the index page repeatedly but the page still not showing my new elements ( I used css). I figured if I clear the browser's cache then maybe it will solve the problem. However, clearing the cache updates my index page but in the end my images do not display in the browser anymore and now I am stuck with that problem till now.

The HTML (The image supposedly appears in the <div class="grid"> as background-image in CSS)

CODE

<!-- THIS IS THE START OF THE MAIN PART WHERE THERE IS THE INPUT FORM -->
        <div class="grid">
            <div class="left-content">
            <section class="index-banner">
                <div class="vertical-center">
                <h1>Angat sa bahay, Angat sa buhay<br> Kaya sa Lessandra</h1>
                <h2 class="w3-text-sand">ANGAT KA <br>DITO</h2>
                </div>
            </section>
            </div>
            <div class="right-content">
            
                <div class="form-container w3-text-red">
                <h2>Reserve Your Lessandra</h2>
                <p>Take your place in Camella Toril</p>
                <form action="/action_page.php" class="form">
                    <table>
                    <tr>
                    <td><input type="text" id="fname" name="fname" placeholder="First Name" class="input w3-input w3-text-red">    </td>
                    <td><input type="text" id="lname" name="lname" placeholder="Last Name" class="input w3-input w3-text-red">    </td>
                    </tr>
                    <tr>
                    <td colspan="2"><input type="text" id="fname" name="phone" placeholder="Mobile Number" class="input w3-input w3-text-red">    </td>
                    </tr>
                    
                    
                    <tr>
                    <td><p>When are you going to the office?</p><br><input type="date" id="birthday" name="birthday" class="input w3-input w3-text-red">    </td>
                    </tr>
                    
                    <tr>
                    <td colspan="2"><p class="p">By clicking reserve you are giving our company assurance that you are going to reserve a Lessandra house unit in Camella Toril here in Davao City. An agent will call you
                            using the mobile number you provided for your assistance    . </p>    </td>
                    </tr>
                    
                    </table>
                    
                    
                    <button type="submit" value="Submit" class="submit w3-brown w3-text-sand w3-hover-black">Reserve</button>
                </form>
                </div>
            
            </div>
        </div>

The CSS Code for the background image

CODE

.grid {
    background: url(arielle.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    height: 90vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100%;
    
    grid-template-areas:
    "left-content right-content";
}

Thank you so much for those who can help me.

[pandy]

Is the image file in the same directory as the CSS file and is it named exactly like that, case and all?

Most often this is the problem. See https://htmlhelp.com/faq/html/images.html#broken-image . Note that the URL should be relative to the CSS file, not the HTML file.

If that doesn't help, please post the URL to the page in question so we can do some detective work.

[nickilo]

Is the image file in the same directory as the CSS file and is it named exactly like that, case and all?

The image file. the css file, and the index.html file are all in the root directory and with the same filename. The image actually was displaying OK before however, when I cleared the browser's catch, that was the time the image started not to appear.

Most often this is the problem. See https://htmlhelp.com/faq/html/images.html#broken-image . Note that the URL should be relative to the CSS file, not the HTML file.

Thank you for the link, but the problem still exist.

I also notice that the image displays just fine when I open the index.html in my local drive, but if I upload it online it will not display which is confusing because my css, html file and image file are all located in the root directory.

If that doesn't help, please post the URL to the page in question so we can do some detective work.

CODE

http://davaohousesale.byethost4.com/

That is my URL...

I also uploaded a test page to see if the image will appear in another page, but still the image did not display. Here is the link:

CODE

http://davaohousesale.byethost4.com/image.html

pls help me sir...

[pandy]

It seems the image file is there, but it's corrupted in some way. Try to load it directly in your browser.
http://davaohousesale.byethost4.com/arielle.jpg

My browser tells me this.

CODE

The image "http://davaohousesale.byethost4.com/arielle.jpg" cannot be displayed because it contains errors.

I downloaded your image and tried to open it in an image viewer, IrfanView. Irfan says this.

CODE

Decode error! Invalid JPEG file structure: two SOI markers

I don't know what SOI markers are...

I would have thought IrfanView's error meant something went wrong when the image was created. But that you can view it locally makes me think that something happened when you transferred the file to the server. Did you do that with FTP? If so, did you transfer it in binary mode? I think most FTP clients makes that choice automatically these days, but anyway.

Try uploading the image again and see if that helps. And if your FTP program has a setting for transfer mode, make sure you choose binary.

[nickilo]

Did you do that with FTP?

Yes I did... I used FileZilla.

If so, did you transfer it in binary mode?

I did not check if I transferred the image file in binary mode. I will try to upload the file in binary mode.

Try uploading the image again and see if that helps. And if your FTP program has a setting for transfer mode, make sure you choose binary.

Thank you sir, I will do it. I will post it here how it goes... wish me luck

[nickilo]

Hello sir Pandy.... It works and I am so happy right now... Thank you very much sir.

[pandy]

Oh, great! I feared it would turn out to be more complicated.