I am having trouble getting my header's background image to display properly - what could be the

https://i.sstatic.net/mlfLX.jpg

This is my very first attempt at an HTML project and I am having trouble applying a background image to the #nheader id. When I try to toggle the code, the browser gives me an error message saying it cannot load the image. I'm not sure what the reason could be?

<html>

<!--this is the start of 

the html file-->
<head>
    <meta keywords="html, learn, teach"/>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title> This is a website </title>
</head>

<body>
   <div id="wrap">
     <div id="nheader">
       <h1>How to Write HTML5</h1>
       <img src="../my demo/images/body.jpg">
     </div>
     <div id="npara">
       <p class="text_para">
       Lorem ipsum dolor sit amet, <span class="color">consectetur</span> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
       </p>
      </div>

       <div id="footer">
       <p class="text_para">
       This is the footer
       </p>
       </div>

    </div>


</body>

<!--here ends the html file -->
</html>

Answer №1

It seems like your image is not displaying due to an incorrect path. In order for images to show up properly, we need to use the correct paths:

  • Absolute Paths (these work no matter where they are called from)
    http://example.com/images/body.jpg
  • Relative Paths
    • To the current script: (e.g. ./images/body.jpg, ../../images/body.jpg)
    • To the current domain/machine: (e.g. /images/body.jpg, ~/img/logo-free.png)

If you want to learn more about how paths function on various systems, consider checking out Wiki: Path (computing).

Keep in mind that every server (domain) is essentially hosted on a machine (computer), which means its folder structure can be reached (with web-related restrictions) through its path system.

It's worth noting that the majority of web domains are hosted on Linux (Unix shell systems).

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

Building a JavaScript object from form elements with the assistance of jQuery

Is there a way to convert an HTML form into a JavaScript object using jQuery? I know about $.serialize, but I'm looking for something that would return a map instead of a string. <form> <input type="text" name="foo1" value="bar1" /> & ...

Start by prioritizing items with a higher click count when looping through the

I am creating a component to display recent search results. The API provides these results, including a value called "click_count". Each time a user clicks on a positive search result from the recent searches, this click_count value will increment by one. ...

Do my media queries accurately reflect the design?

I am new to web design and currently taking a course. As part of my assignment, I need to make my website responsive. However, I am having trouble with my media queries. Despite hours of research and tweaking, some elements are not responding as expected. ...

Having trouble rendering the response text from the API fetched in Next.js on a webpage

I've written some code to back up a session border controller (SBC) and it seems to be working well based on the output from console.log. The issue I'm facing is that the response comes in as a text/ini file object and I'm unable to display ...

move position when clicked-javascript animation

Is there a way to create a button that changes a div's position with a 2-second transition on the first click and then returns it back on the second click? I tried implementing this code, but unfortunately, it doesn't bring the div back. va ...

Is it possible to retrieve the current selector as a string in LESS?

Is there a way to utilize the name of my css classes to specify the URL for an image they depend on? I know that using an ampersand within a selector allows you to add additional states, but can it be accessed as a string? For example: .my-image{ back ...

Establish a variable based on a specific value

I am currently working on creating a listbox with 2 options: Ja (Yes) or Nein (No). Additionally, I am using a default value taken from the database for the record. Here is the code snippet: <td> <select name="s_BKAG"> ...

Ways to Turn Off CSS Vertical Menu Flyout Animation

I'm new to HTML Lists and trying to figure out how to disable the "Hover flyout effect" so that all sub items are listed vertically below the main item while remaining visible. Can someone please help me understand which specific CSS properties can be ...

Using Jquery, update the class toggle to apply to multiple span elements instead

I am facing an issue where I need to change the class of a span child using a toggle feature when clicking on a browser row. The problem arises when there are multiple rows, as the span cannot be found and the functionality does not work properly. I have ...

Filtering Tables with AngularJS

Currently, I'm experimenting with using angularJS to filter data in a table. My goal is to load the data from a JSON file that has a structure like this (example file): [{name: "Moroni", age: 50}, {name: "Tiancum", age: 43}, { ...

Activate the display by utilizing the getElementsByClassName method

In my design, I'd like to have the "Don't have an account?" line trigger the display of the .registrybox class when clicked. However, the script I've written doesn't seem to be working as intended. The script is meant to hide the .login ...

Having trouble interacting with an element using Selenium in Python

I am trying to figure out how to download an image from Instagram, but I cannot seem to programmatically click on the download button of this page. Even after attempting to use XPath and CSS selector methods for clicking, unfortunately, neither seems to w ...

Loading screen in Next.js

Is there a way to implement a loader page during transitions within the same web application using Next JS? During development, the pages transition smoothly with the CSS applied correctly. However, when moving the application to production environment, t ...

Unable to locate CSS file in subfolder

Comparing two scenarios: Scenario 1 is problem-free, but issues persist in scenario 2. Review the details below: Scenario 1: MasterPages: Main\MasterPages.master Css : Main\Theme\CSS\ Javascript : Main\Theme\Javascrip ...

I am struggling to activate the hovering feature on my menu bar

I am having trouble making the hover effect in my navigation bar work properly. Even though I can separately make the 'display: none' and hover effects work, they do not function together. I am unsure of what mistake I might be making. Below is ...

The values in my JavaScript don't correspond to the values in my CSS

Is it possible to retrieve the display value (display:none; or display:block;) of a div with the ID "navmenu" using JavaScript? I have encountered an issue where I can successfully read the style values when they are set within the same HTML file, but not ...

Generate a document of purchase utilizing PHP POST array information

Currently studying PHP and delving into creating a basic cart/processing script. The item cart has been successfully developed, however, facing challenges in displaying information on the receipt once the user confirms purchasing the item(s) in their cart ...

Tips for Utilizing Environmental Variables within a Vue Application's index.html File

My website has an index file with all the necessary meta tags, stylesheets, and scripts: <!DOCTYPE html> <html lang="en"> <head> <!-- Required Meta --> <meta charset="UTF-8"> <meta http-equi ...

Having difficulty with an API request and retrieving information from it to showcase on the web browser

Struggling to recreate a product details page using an API for the first time. I managed to fetch the data but extracting the necessary information for the browser is proving difficult. YouTube videos haven't been much help. This is my attempt at cal ...

Strangely behaving animated mobile navigation glitch

CodePen showcasing the mobile navigation Upon initial interaction with the mobile navigation, it operates as expected. However, a bug arises with subsequent interactions. The navigation either opens and closes instantly or the links appear in a jumbled or ...