What could be the reason for the image not displaying properly in a React application?

Why isn't the image appearing as a background in the container with text on top? What am I doing wrong here?

<div className="container-fluid">
<div className="col-md-12 col-sm-12 col-xs-12 bgContainer matchingTalent">
                <div className="col-md-12 col-sm-12 col-xs-12 frContainer text-center">
                    <h2 className="col-md-12 col-sm-12 col-xs-12 text-center matchingTalentHeading">
                    Header Text
                    </h2>
                    <p className="col-md-12 text-center matchingTalentText">Test para text to add more in detail.</p>
                </div>
            </div>
</div>

**css**

.bgContainer {
  background-image: url("https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8YnVpbGRpbmd8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
 
  background-size: 100% 100%;
  height: 50vh;
  opacity: 0.6;
 
}
.frContainer {
  padding: 5.5em 3em;
}
.matchingTalentHeading,
.matchingTalentText {
  z-index: 5;
  color: black!important;
}

Answer №1

Start by testing this method to check if the URL is broken and if the selector is accurate.

.bgContainer {
    background-image: url("https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8YnVpbGRpbmd8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
    background-repeat: no-repeat;
    background-color: #cccccc;
}

Additionally, test using container-fluid as a selector

.container-fluid {
    background-image: url("https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8YnVpbGRpbmd8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
    background-repeat: no-repeat;
    background-color: #cccccc;
}

For more information, visit:

W3Schools

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

When executing npm ci, the CI pipeline encounters an error

Recently, I attempted to incorporate a .yml file into my React project, but encountered an error in the pipeline when attempting to run npm ci. Interestingly, this process runs smoothly on my local machine but fails on the pipeline for unknown reasons. The ...

Trouble arises when attempting to import React JSX project/modules from npm into an AngularJS TypeScript module

In the process of developing a proof-of-concept React framework/library, I aim to create a versatile solution that can be utilized in both React and AngularJS applications. To achieve this goal, I have initiated two separate projects: - sample-react-frame ...

Code for Custom Controllers in Strapi Beta version 3.0

I have encountered some discrepancies in the beta version of Strapi's controllers compared to the previous version. The new version includes multipart/sanitization boilerplate, and I am having trouble integrating my order object and Stripe charge. Be ...

What is the best way to bring a closing </div> tag closer to its opening <div> tag in React, Angular, or Vue

Introduction Experienced JavaScript developers may cringe at the sight of a lengthy 200-line function. Their goal is to break it down into smaller, more manageable functions, each around 20 lines long. The idea is for a function to fit on one screen witho ...

I'm looking for a way to implement an interactive auto slideshow in JavaScript that allows users to manually

Having spent a lot of time studying auto slideshows, I'm facing an issue where clicking on the bullet to show the next image results in the image disappearing suddenly. Initially, I thought the problem was with using addEventListener events, so I swi ...

Is there a way in JavaScript to track changes in CSS properties such as transitioning from "display:none" to "display:block"?

Is there a way to detect when the CSS property "display" of an image is changed by another JavaScript script or function and then execute some JS code? I tried using $(this).bind('propertychange', function(){}) but it doesn't work, and setIn ...

Why does Asp.net Webform load twice every time I click on the form link?

In my asp.net webform project, I am encountering an issue where the page is running twice when clicked. The problem arises when calling two functions (Fill DropDowns) on the Page_Load Event. During debugging, it was observed that the control enters the Pa ...

Creating a chat interface with chat bubbles in React JS can be done by implementing components such as Message

Having some JSON data stored in dummyData, I am seeking guidance on how to position chat bubbles on the left and right based on the direction. My framework of choice is Material UI along with the context API. The attached image serves as a visual reference ...

Expand the video comparison slider to occupy the entire width and height

I am striving to develop a video comparison slider that fills the height and width of the viewport, inspired by the techniques discussed in this informative article: Article Despite my efforts, I have not been successful in achieving this effect so far a ...

Tips for managing post-generated buttons using jQuery?

I've created buttons using JavaScript and added them to my HTML. Now I want to use jQuery to handle the clicks on b_1 and b_2. How can I make this work? $("#mainbutton").click(function (){ document.getElementById("content").innerHTML = '< ...

integrating live html content into dompdf with php

Hey there, I'm currently working on a script that dynamically loads HTML using the file_get_contents function and then generates and saves the PDF on the server. However, I'm running into a problem where my PHP file is throwing a 500 internal ser ...

Variances in the order of HTML elements within an article's layout

Check out this example of HTML and CSS <!DOCTYPE html> <html> <head> <title>Floats Example</title> <style type="text/css"> .left { float:left; width:100px; } .righ ...

What steps can I take to guarantee that both images and text adapt well to different screen sizes?

Is there a way I can organize my website to display 3 movies per row with the text centered relative to the image? Here is how it currently looks (the red box is just for reference, please ignore): https://i.stack.imgur.com/w2pgN.jpg Also, when I resize m ...

Aligning the <div> list to the center of the webpage

Is there a way to center this list element on the page? It consists of three boxes that are all the same size, and I want them to always remain in the middle. body { width: 100%; } .boxes { display: block; margin: 0 auto; } .box-container ...

Utilizing Python to dynamically create unique tags from deeply nested dictionaries through recursion

As part of my project, I am developing a unique dynamic template tool that can seamlessly integrate with any templating framework such as pugs and jinja. The goal is to create a demo that resembles the following structure: view! { div { p { ...

Clicking on a React Material UI ListItem

I am trying to develop a clickable country list with icons next to each ListItem. However, I am facing an issue where only one item can be selected at a time in a single click. Upon clicking a new item, the previously selected one gets deselected first. He ...

Is it possible to customize the MUI CSS for a specific menu item using the sx prop?

How can I apply the MenuItemStyle to the sx prop of a MenuItem using: const MenuItemStyle = { '&:hover': { backgroundColor: `${theme.color.secondaryHover}`, }, '&:selected, &:selected:hover': { backgroundColor: ...

Currently I am developing a Minimax Algorithm implementation for my reversi game using react.js, however I am encountering a RangeError

I've been implementing a Minimax Algorithm for my reversi game to create a strong AI opponent for players. However, I ran into the following error message: "RangeError: Maximum call stack size exceeded" How can I go about resolving this issue? Here ...

A distinctive noise is heard when hovering over multiple instances of a div

I'm trying to implement a feature where a unique sound plays when hovering over a specific div element with a particular class (.trigger). However, I am encountering an issue where multiple instances of this div class result in the same sound being pl ...

Reset the state of the React Rich Text Editor when the ENTER key is pressed

I want to reset the state of the React Rich Text Editor (https://github.com/sstur/react-rte) when the enter key is pressed. This is how my state is structured: state = { value: RichTextEditor.createEmptyValue() } The RichTextEditor component offers ...