What is causing the background image to not display within my <div>?

I want to add a background image to only a specific part of my website, using the image as an id called "fruit." However, the image is not showing up. Here is the code I have:

<div class="p-1 text-center bg-light" id="fruit">
  <div class="col-md-6 mx-auto my-5">
    <h1 class="display-4 font-weight-normal">TrendyEats</h1>
    <p class="lead font-weight-normal">The Latest Food Trends</p>
    <a class="btn btn-outline-secondary" href="#">Login</a>
    <p class="small pt-4">blablabla </p>
  </div>
</div>

Here is the CSS for the "fruit" id:

#fruit {
  background-image: url('/Pictures/fruits.jpg');
  alt:"woops";
}

The "alt" attribute is also not showing up.

Any assistance would be greatly appreciated. Thank you!

Update: Issue resolved, I needed to write "Pictures/fruits.jpg" instead of "/Pictures/fruits.jpg"

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

It's important to double-check the accuracy of your relative link. I have noticed that when I replace it with an external link, the background appears without any issues.

It is recommended to include the "alt" attribute within an img tag in HTML. In your specific case, this seems to be missing. When using a background image via CSS, it might be beneficial to have a solid color as a backup in case the link fails to load.

Answer №2

make sure to include

#veggies {
  background-image: url("./Images/vegetables.jpg");
  background-color: #333;
}

double check that the css file is properly connected to the html document.

Answer №3

Make sure to double-check the image URL to ensure it is working properly. [I replaced it with content after #fruit]. Remember, you cannot place the alt attribute inside CSS as it is an HTML attribute. You will need to add it directly to the HTML image element or set it using JavaScript.

#fruit {
   background-image: url('https://www.w3schools.com/w3css/img_lights.jpg'); 
 }
 
#fruit:after {
  content: " (woops)";
}
<div class="p-1 text-center bg-light" id="fruit">
      <div class="col-md-6 mx-auto my-5">
        <h1 class="display-4 font-weight-normal">TrendyEats</h1>
        <p class="lead font-weight-normal">The Latest Food Trends</p>
        <a class="btn btn-outline-secondary" href="#">Login</a>
        <p class="small pt-4">blablabla </p>
      </div>
    </div>

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

Is it possible to trigger the execution of two functions simultaneously by using onClick in JavaScript?

I currently possess: one = () => { //perform a task } two = () => { //execute an action } <div> <button onClick={/*this.one, this.two (it doesn't function)*/}>Go</button> </div> Is there a way to invoke two f ...

javascripthtmlreactjs

Utilize Python and Selenium to extract a URL from HTML code

While seeking assistance with a dropdown menu in a table, I came across this problem. The issue at hand involves fetching the URL from the source code snippet below: <a href="#" onclick="window.open('/consultas/util/pdf.php?type=rdd ...

pythonhtmlpython-3.xseleniumpdf

Modify the appearance of certain text within an input field

I need some help adding style to specific text within an input field. For example, if the user types in "Hello world" and the special text is "world" I want to achieve this result: https://i.sstatic.net/Ozd6n.png This is what my HTML code looks like: & ...

javascripthtmlcssangularinput

Request to api.upcitemdb.com endpoint encountering CORS issue

This code may seem simple, but for some reason, it's not working as expected. What I'm trying to achieve is to call the GET API at: I want to make this API call using either JavaScript or jQuery. I've attempted various approaches, but none ...

javascriptjqueryhtmlajaxxmlhttprequest

Is there a way to transfer table row data to another table by simply clicking on the corresponding checkbox in the same row?

I'm working with a table that includes 4 fields: service, amount, tax, and action. My challenge is to have the data from any row in the first table added to a second table when its checkbox is selected. The second table should have the same fields a ...

javascriptjqueryhtml

Flask - Refreshing Forms Dynamically

In an effort to enhance the responsiveness of my app, I am looking for a way to prevent the page from reloading every time a POST request is sent. My current setup includes a dynamically generated form with input fields designed like this: <div class=&q ...

javascriptpythonhtmlflask

Unable to cycle through an array of objects in JavaScript. Only receiving output for the initial element

var people = new Array(); var individual = { first_name: "Padma", identification_number: 1, region: "India" }; people.push(individual); people.push([individual = { first_name: "Balaji", identification_number: 3, region: "India" }]); people. ...

javascripthtmljquery

checkbox-activated navigation bar

Struggling to implement a Nav-drawer that should open when a checkbox is selected, everything seems to be set up correctly but the issue arises when it comes to actually opening it. Here is the code snippet: <div class="leftside"> <input typ ...

htmlcssnav

Solving the "ExpressionChangedAfterItHasBeenCheckedError" in Ionic: A Guide

//html <span style="margin-left:43%;background-color:rgb(229,229,229);border- radius:10%">&nbsp;&nbsp;{{formatEpoch(epoch)}}&nbsp;&nbsp;</span> //ts lastdate:any; formatEpoch(epoch): string { ...

htmlangulartypescriptionic-framework

What is the procedure for inserting comments into inline CSS?

You know, I've been wondering how to effectively comment out inline CSS styles within HTML tags. Is it best to use the /* */ comments from CSS? Or should we opt for <!-- --> in HTML? <span class="color_dark" style="top:20px;font-size: 17px;l ...

htmlcss

Are DOM Events compatible with ajax-loaded content that cannot be unloaded?

How should events be managed with ajax-loaded content that can be hidden or displayed? I have created a sidebar in HTML that toggles visibility on click, along with two pages that are loaded using ajax. When the sidebar is hidden or displayed, I need to ...

javascriptjqueryhtmlajax

Strange spacing appears after image tags

My efforts to remove the space (red) between the <img> and the <div> have been unsuccessful. I have minimized it as much as possible. After researching similar threads, it seems that whitespace or newlines between inline-box elements can cause ...

htmlcss

What is the best way to ensure that a navbar dropdown appears above all other elements on

I'm having trouble creating a navbar dropdown with material design. The dropdown is working fine, but the issue I'm facing is that other elements are floating above it. https://i.stack.imgur.com/aJ0BH.png What I want is for the dropdown to floa ...

javascripthtmlcssmaterial-ui

Different dimensions of the <select> element with the help of Ryan Fait's jQuery design script

New to java and struggling on my own, I am seeking advice on how to customize Ryan Fait's jQuery input styles to accommodate 2 unique types of elements. For the code reference, please visit: While the code is efficient, I am unsure how to create two ...

jquerycssselectinput

invoking a function by utilizing nested controllers

Struggling with nested controllers, the main goal of this code is to link data extracted from a .json file to another function or file. .html file: <div ng-app="myApp" ng-controller="GetCtrl" > <li ng-controller="ChannelCtrl" ng-repeat="x in ...

javascriptangularjshtml

Discover the identity of an element through the value of another element

Looking for a way to retrieve the id value based on the input value in this HTML code. For instance, I need to identify the id value associated with the input value of number2 - which is unknown2. How can this be achieved using jQuery? <th id="unknow ...

javascriptjqueryhtml

Adjust the height of a TextField component in material-ui

index.js import React from 'react' import TextField from '@material-ui/core/TextField' import style from './style' import withStyles from 'hoc/withStyles' import { connect } from 'react-redux' class Sear ...

cssreactjsmaterial-ui

Ways to modify the color of a chosen item in a Xul listbox?

Is there a way to modify the color of the selected item in a Xul listbox? I attempted this code snippet: listitem:focus { background-color: red; color: red; } However, it does not seem to be working. I've searched through CSS and xul docume ...

cssxul

C++ engine for embedding HTML, CSS, and scripts

I am working on a C++ Windows native application and I'm looking for an HTML engine to help with displaying data in the GUI. After some searching, I came across Sciter, which seems like a good fit. However, I've noticed that it lacks complete CS ...

htmlc++csstwitter-bootstrapsciter

Transition the background image color smoothly from left to right in a seamless and continuous movement

A switch button located in the top right corner can toggle between light and dark modes. The background features a zoomed-in image. Currently, the transition is as follows: From left to right when switched to dark mode From right to left when switched to ...

javascripthtmlcssreactjs