How can I properly insert a background image using HTML and CSS?

Despite entering the correct URL link, I am facing an issue with adding a background image to one of my webpages. I have included the image tag in the code but the image is not displaying as expected. Can anyone help me troubleshoot this problem?

<!DOCTYPE html>html>

<head>
  <title>Know US!</title>
</head>

<body>
  <h1>About Us</h1>
  <pre><h2>Our Mission!</h2><p>
            -To promote spirit of health and fitness around the globe.
            -To induct,motivate and train the youth to undergo rigorous 
             training in various games & sports to preparethem for sporting 
             arenas at both national and international levels.
            -To provide them with state of the art & world class indoor and 
             outdoor facilities for that purpose.
             <h3>Our Vision</h3>
             <p>Our vision is to shape the people into physically and mentally
             healthy and robust individuals irrespective of their age, gender,
             caste or creed.Our vision is to facilitate the youth to persue 
             their individual dreams and aspiration in the field of sports and
             provide them the best possible indoor-outdoor facilities of 
             international standards.</p>
        </pre>

  </p>

  <h3>
    Our Glorious Journey</p>
  </h3>
  <hr />

  <main>
    <div class="box">
      <img src="cri.jpg">
    </div>
    <div class="box">
      <img src="boxing.jpeg">
    </div>
    <div class="box">
      <img src="cri2.jpg">
    </div>
  </main>
</body>

</html>

I have included the image tag with the correct URL, but still cannot see the image. Any suggestions on why this could be happening would be greatly appreciated.

Answer №1

Here is an example of how you can set the style:

<main>
    <div class="box back1"></div>
    <div class="box back2"></div>
    <div class="box back3"></div>
</main>
<style>
    .box{
         background-size:100%;
     }
     .back1{
        background-image: url(cri1.jpg);
     }
     .back2{
        background-image: url(boxing.jpeg);
     }
     .back3{
        background-image: url(cri2.jpg);
     }
</style>

Feel free to check it out and enjoy!

Answer №2

Adding an image in HTML can be done in various ways, but the most commonly used method is to use the following code snippet: If the specified image is not found in the files, the text inside the "alt" attribute will be displayed instead. This allows the user to see descriptive text if the image is missing.

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

django was unable to interpret the remainder: 'css/materialize.min.css' from 'css/materialize.min.css'

In following a tutorial, I am adding a chat bot UI that is embedded in Django. The file structure looks like this: . ├── db.sqlite3 ├── installDjango.sh ├── manage.py ├── rasadjango │ ├── asgi.py │ ├── __init__.p ...

What is the best way to apply a border-radius to the top of bars in @nivo/bar?

Is it possible to apply a border radius to the tops of each stack in a stacked responsive bar created from the Nivo library, without affecting the bottom? Currently, the responsive bar's border radius applies to both the top and bottom. Thank you! ...

The right floating behavior with <li> elements seems to be malfunctioning

I am currently dealing with an issue in my code where it works perfectly in Firefox and IE 8, but in IE 7 the second list item is displaying with some extra space at the top instead of being on the same line. <LI style="PADDING-LEFT: 20px"> ...

Issues with implementing CSS Icon Generated Content on a live Azure Web Role

My dilemma lies with my MVC4 web application that I'm attempting to deploy as an Azure web role. The site incorporates Metro UI CSS. While the deployed web role is functioning properly overall, I am encountering an issue with the CSS-generated conten ...

Setting HTML in the title for the list view in fullcalendar.js version 4

Received the following information from a source, but was unable to leave a comment due to insufficient points. Looking for assistance on setting HTML in title using fullcalendar.js v4 eventRender: function(info) { info.el.querySelector('.fc-titl ...

Any ideas on troubleshooting the issue in tsconfig.json file?

While working on my node.js website, I decided to run the npm run dev script but encountered an error. Here is the output: PS C:\Users\yairk\OneDrive\Desktop\personal-website-3D-main> npm run dev > dev > webpack serve --c ...

Transferring a parameter from one HTML page to another using a query string

I have a scenario where there are three pages: p1, p2, and p3. In p1, there are 3 buttons. When I click a button, it should take me to p2. In p2, there will be 2 buttons, and if I click one of them, it should go to p3. In p3, I need details from p1 in or ...

Enhance User Experience - Automatically highlight the first element in Prime NG Menu when activated

I have been working on transitioning the focus from the PrimeNG menu to the first element in the list when the menu is toggled. Here is what I've come up with: In my template, I added: <p-menu appendTo="body" #menu [popup]="true&quo ...

PHP code not displaying image names in database

MySQL Database: Image Name and Type Attribute `Image varchar256` I am facing an issue with uploading image names to MySQL. The image is being moved to the folder as required, but the name of the image is not showing up in the database. Can someone please ...

Mastering the technique of extracting the HTML source code from a saved local file with Python

Struggling with HTML and beautiful soup as a beginner. Trying to parse a locally saved HTML file in Python, I used the code snippet below: with open(file_path) as fp: soup = BeautifulSoup(fp) print(soup) The output is strange, showing part of it like ...

Attempting to position the input field beside the label

I need help aligning the input field box next to my label. Currently, there is a gap between the text (label) and the input field when clicking on Item#1 and Invoice Number. I want the input field to be directly next to the label. Can anyone assist me with ...

Ways to choose tags that do not contain a particular tag within them

I am trying to utilize querySelectorAll to select all i elements that do not contain a font tag. The selector I attempted is: document.querySelectorAll('i > *:not(font)') <i> <font color="008000">Here goes some text</fon ...

Setting the CSS property `overflow-y: scroll;` does not make the element scrollable and causes it to exceed 100% of the block

I am seeking a solution to create a y-axis scrollable block within the left-navbar. The height of this block should occupy all available space within the left-navbar, ensuring that the left-navbar itself remains at 100% of the page height. The issue arise ...

Just a snippet of a webpage shown

My website focuses on online magazines. I'm looking for a way to selectively display specific parts of articles that are in regular HTML format with a global CSS stylesheet applied. There are no images, only text. How can I extract certain segments of ...

Why does PHP seem to be rushing to insert data before I even click on the

I am new to PHP and SQL, so I have tried to connect my form to the database using various templates and examples. However, I am facing an issue where the record is being created in the database on page load before I even input data and press submit. I am ...

Repurposing JavaScript objects after clearing their contents

Here's my issue. I'm working with a Javascript object, initialized as var stack = {}. This object is used in my project to store arrays. When the user clicks the add button, an array is added to the object with a specific key that is inputted in ...

My Bootstrap navbar seems to be malfunctioning. I'm wondering if there could be an issue with

here is a snippet of the code I'm working on: <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="https://i.stack.imgur.com/5XeYV.png" ...

activate the div on ng-click

In my HTML code, I have a section enclosed in a div tag that is used to display a form for replying to comments. <div class="box-body showmycomments"></div> <div class="box-footer showmycomments"></div> Additionally, there is an ...

Ensure advertisements are easily accessible and not visible to screen-reading tools

I oversee the management of numerous ads on a website. My goal is to enhance their accessibility, and though I have been doing research, there seems to be limited information available on how to achieve this effectively. While I continue my investigation, ...

difficulties switching content between different screen sizes

Having trouble with hidden-xs and visible-xs-* classes not working as expected. Even a simple code snippet like the following doesn't hide the content: <div class="hidden-xs"> test test test </div> Even when scaling down my window to ...