Having trouble transferring my background image from my FTP to my website

I'm having trouble setting a background image for the header on my website. It seems that nothing is loading. The hosting service I use has disabled linking images via external URLs, so I tried uploading the image to Filezilla, but that didn't work either.

I copied the image path from FTP and pasted it into my HTML file, but it still didn't work. I also attempted to use code from tutorials, but had no success. I can't seem to figure out if the issue lies with the code or the FTP settings.

Answer №1

Imagine creating a map within your FTP account, let's call this map Test for the time being. Within the map Test, you upload a file named index.html and also add an image. Now, within the Test map, you have two files - index.html and image.jpg.

To use this image in your index.html file, you simply write the code <img src="image.jpg"/>. This will display the uploaded image when accessed via the link: www.yourhosting/ftpname/Test/index.html

EDIT:

NOTE: It is essential to work online rather than on your local host. Based on your uploads using FileZilla, it seems like you are already following this practice.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for transferring data between two components

I'm looking for a way to transfer an object's id from one component to another. <ng-container matColumnDef="actions"> <mat-header-cell *matHeaderCellDef></mat-header-cell> <mat-cell *matCellDef="let user"> ...

Transitioning the font stack from SCSS to JSS (cssinjs)

We are currently implementing a variety of custom fonts with different weights for various purposes. With our entire stack now using Material UI with JSS theming and styling, we aim to eliminate the remaining .scss files in our folder structure. All the f ...

Is there a way to remove a pseudo element in CSS using Internet Explorer

I've been struggling to make some pseudo elements work in Internet Explorer, but it seems like I can't get it to function as intended. It's as if IE is ignoring the CSS rules that I have set up for these elements, and it's quite frustr ...

Angular 2 Login Component Featuring Customizable Templates

Currently, I have set up an AppModule with a variety of components, including the AppComponent which serves as the template component with the router-outlet directive. I am looking to create an AuthModule that includes its own template AuthComponent situa ...

Include an additional tag solely by using a specific set of keys predetermined in advance

After getting inspiration from Stackoverflow, I decided to enhance my text-box with a tagging feature. The first step was downloading and adding the http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js file to my ASP.NET web folder, allowing me to u ...

What is the best way to add a darker tint to the background behind my overlay panel in jQuery

After grabbing the panel code from the jQuery Mobile website and integrating it into my file, I am interested in changing the appearance. I want to either darken or blur the background content when the panel is displayed. I attempted to use filter:blur(5px ...

Table lines that are indented

I am currently in the process of transforming a standard HTML table into an indented version like this: Is there a way to hide the initial part of the border so that it aligns with the start of the text, even if I can't do it directly in HTML? ...

What could be the reason for the absence of margin on the top and bottom

.separator { border: 1px solid #000000; margin: 10px; } <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Separator</title> </head> <body> &l ...

Ways to eliminate non-breaking spaces in HTML coding without using software

Although similar questions have been asked in the past, I am new to coding in Javascript and struggling to adapt the existing advice to fit my specific situation. My current challenge involves removing "&nbsp" from the hardcoded table row below. Ideal ...

The art of analyzing HTML using either jquery or php

I have a question regarding HTML coding. Can anyone help me solve the following example? Here is a snippet of my HTML site: <div> <p><strong>Title 1</strong></p> <p>Content 1</p> <p>Content 2< ...

Video streaming to mobile browsers is experiencing issues due to incomplete HTTP headers being sent

I have successfully implemented a solution to stream fragmented mp4 video to a mobile browser client using the Nancy MVC framework. The code is functioning as expected. However, one scenario I am facing is that the video being streamed is generated simult ...

AngularJS - Unchecked radio button issue

Within my code, there is an ng-repeat including several radio buttons: <div class="panel panel-default" ng-repeat="item in vm.itemList"> ... <td ng-show="item.edit"> <div class="row"> ...

Issue with customizing the appearance of the selected option in a dropdown menu

Is there a way to change the background color of each option in a select box when it is selected? Currently, when an option is clicked, it appears blue along with the selected text color. I have tried various selectors like :active, :focus, ::selection, [s ...

I'm encountering issues with this code for a dice game. It's strange that whenever I click the roll dice button, it disappears. Additionally, linking an .css sheet seems to cause the entire page to

I'm currently working with two separate codes: one for HTML and the other for JavaScript. I am facing an issue where the button keeps disappearing when I try to add any CSS styling to it. Even a basic CSS file seems to override everything else and lea ...

Expanding Page Width Using iPad CSS Styling

I am currently experiencing some difficulties with my webpage and its header layout when viewed on an iPad versus a desktop. Upon visiting on a computer, the images and header/footer are intended to extend 100% to the edges of the screen. However, when ...

The dollar sign is not available during the onload event

Can someone help me with the error I am encountering where $ is unidentified when using onload on my page? This is a simple sample page created to call a function after the page has loaded. Jquery Code $(document).ready(function(){ alert("loaded"); }) ...

Placing error notifications beneath my table rows for a more polished appearance

In the process of creating a review page for my app that showcases uploaded files, I've encountered an issue. Whenever a user uploads files with errors, I want to display a warning message below each specific file. Currently, I'm able to show the ...

What is the best way to focus the video on its center while simultaneously cropping the edges to keep it in its original position and size?

I'm trying to create a special design element: a muted video that zooms in when the mouse hovers over it, but remains the same size as it is clipped at the edges. It would be even more impressive if the video could zoom in towards the point where the ...

What is the method for updating the value of the Sass variable in Angular 4?

Within the file app.component.scss, there is a variable named $color that has been set to 'red'. What steps can be taken within the file app.component.ts in order to access this variable and change its value to 'green'? ...

Selecting multiple items in jQuery based on different attributes is a useful feature that

I am looking to choose multiple items based on their data attribute. Each item has a unique data-id. <div class="foo" data-id="1"></div> <div class="foo" data-id="2"></div> <div class=" ...