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

Creating form components in a row

I'm currently working on an app and I'm attempting to align 3 form elements in a ratio of 25/25/50, but it's proving to be quite challenging. At the end of this message, you'll find a picture showing the current layout. Additionally, I& ...

Accordion border in Bootstrap should be applied to all items except the first one

I am currently implementing Bootstrap accordions in an Angular application and I am facing an issue where I want to have a colored border all around each accordion panel. The problem is that by default, Bootstrap removes the top border from all accordions ...

No display of Tailwind updates on local server in Safari browser using NextJS and a Mac M1

For my personal project with NextJS, I am using Tailwind CSS, but I am experiencing frequent issues with updating styles. It seems like there is a 50/50 chance that Tailwind will apply the styles to the component properly, and sometimes I have to go throug ...

Python Selenium: Strategies for Iteratively Waiting for a Clickable Element

My task involves downloading images from website pages using Python Selenium. I need to select the web elements of these images and click on them one by one: ... THUMBNAILS = browser.find_elements_by_xpath("//div[contains(@class, 'lg-thumb-item&a ...

Creating a dynamic background using a blend of two hues in CSS

Is there a way to stack two colors on top of each other using just one div element, or even better, achieve the same effect with just one color that is a blend of the two? I currently have two divs superimposed, with the top one at 60% opacity. I've ...

Using AngularJS to Retrieve a Specific DOM Element Using its Unique Identifier

Example Please take a look at this Plunkr example. Requirement I am looking for a way to retrieve an element by its id. The provided code should be capable of applying a CSS class to any existing DOM element within the current view. This functionality ...

Create a custom navigation bar using PlayFramework for a unique video streaming website

Attempting to create a dynamic navigation bar in Play using the code below in my main.scala.html file: @(title: String)(content: Html) <!DOCTYPE html> <html lang="en"> <head> <title>@title</title> <li ...

What is the best way to handle JSON data in JQuery when it is returned with a header type of "text/html"?

I'm attempting to utilize the jquery getJSON method in order to retrieve JSON data from a public API. However, I am consistently encountering errors when the callback of my getJSON request is executed. Warning: Resource interpreted as Script but trans ...

Condense everything when displaying one at a time (various divs)

I found the solution at https://getbootstrap.com/docs/4.2/components/collapse/ My query is related to collapsing multiple elements and showing only one when divided into different divs. While it works within the same div, dividing content into separate di ...

Set the text alignment to the left/start inside a div contained within a Material UI Box

Trying to figure out how to make the error handling ui of this field look like another field's error handling ui. Note that in the second example, the error text is aligned to the left. How can I achieve this alignment without considering text color ...

Is there a way to keep Angular from automatically re-sorting my list when I make edits to it?

I have designed a small application with Angular for managing Todolists. Each list contains multiple todos, where each todo has attributes such as name, value1, and value2. To automatically sort each list using Angular, I utilized ng-repeat="todo in selec ...

Creating a visual selection menu with icon options using jQuery or a similar framework

Currently, I am working on designing an HTML form that includes a field where users must select from a set of options such as sunny, cloudy, rainy, and more. I am seeking a creative alternative to using the <select> or <radio> input elements. ...

Using jQuery to update the CSS class for all li icons except for the one that is currently selected

Utilizing Font Awesome Icons within the li elements of a ul Challenge When a user clicks on the user icon, the color changes from black to yellow. If the user clicks on another icon, that one also turns yellow. Is there a way to remove the existing yell ...

Is there a way for me to identify the scrolling height and dynamically adjust the title using jQuery?

I am in the process of creating a list of shops from different countries for my website. I want to implement a feature that detects when the user has scrolled to a specific area so I can update the title at the top accordingly. My idea is to assign classe ...

Set the DIV element to match the height of its container

I'm currently using this HTML code, and it's functioning correctly. However, I would like the height of the div to adjust dynamically based on the tab's content, rather than specifying a fixed height of 200px. Using a percentage value for th ...

Is your MJML column layout not stacking properly on mobile devices?

I've been struggling with a basic 2-column design created using the online editor at mjml.io. I can't seem to get it to stack on mobile devices. The email looks identical on desktop (Outlook 365 for PC) and mobile (Outlook for iOS on iPhone 13) ...

Switching between vertical and horizontal div layouts while reorganizing text fields within the top div

function toggleDivs() { var container = document.querySelector(".container"); var top = document.querySelector(".top"); var bottom = document.querySelector(".bottom"); if (container.style.flexDirection === "column") { container.style.flexDirec ...

Steps for adding a background image to a div element

I am struggling to place my background behind the jumbotron div, but no matter what I do, it always ends up appearing below the image instead of on top of it. Can someone please guide me on how to resolve this issue? Note: I have a specific requirement wh ...

Certain HTML elements on the webpage are not functioning properly when attempting to incorporate a div tag

One of the challenges I'm currently facing is that the links for HOME and ABOUT ME in the header section are not accessible when the 'data' div is added. Strangely, the DOWNLOAD and CONTACT ME links still work fine. This issue seems to be oc ...

Safari 15.6.1 does not support background video playback in Next.js

Currently using Safari version 15.6.1 for a small website project, I have encountered an issue where the video appears frozen with an arrow in the middle. Oddly enough, this problem only occurs on Safari as both Chrome and Firefox display the code correctl ...