I'm having trouble displaying my background image unless I specifically set the height in pixels or viewport height

I have been working with ReactJS and on my main page container, I am setting a background image like this:

.opening-container {
  background-image: url("../../images/sadaqashdbg.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

The opening-container is the main div that includes all the elements on the page. However, I am facing an issue where the background image is not showing. Even when I set the height to 100%, it still does not appear. But, if I set the height to 1200px or height:100vh, the image starts showing but does not cover the entire page.

Here is an example of how it is structured:

<div className='opening-container'>
<button></button>
<button></button>
<h2></h2>
<p></p>
</div>

Answer №1

When calculating the percentage, it is in relation to the height of the container block that is generated. If the container block does not have a specified height, make sure to define the height of the parent container or use vh or px units instead.

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

Exploring the use of shortcode attributes within a WordPress plugin coupled with React functionality

I am currently exploring ways to pass attributes into a React-based plugin in WordPress (using @wordpress/scripts). Here is my main.php file: <?php defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' ); define( 'ER ...

Animation of two divs stacked on top of each other

I am trying to replicate the animation seen on this website . I have two divs stacked on top of each other and I've written the following jQuery code: $('div.unternehmen-ahover').hover( function () { $('div.unternehmen-ahover' ...

Unable to conceal a div element on mobile devices

Creating a unique bootstrap theme for Wordpress and encountering an issue with hiding the "sptxt" text on mobile screens. <div class="row"> <div class="col-lg-5 col-sm-12"><div id="gr"></div></div> <div class="col- ...

The click event triggered by the onclick clone/function may not always activate the click handler

As a newcomer in the JavaScript domain, I am encountering an issue where the first clone created after clicking 'add more' does not trigger my click me function. However, every subsequent clone works perfectly fine with it. What could be causing ...

"div p" or "div * p"? Do they have the same meaning or is there a difference between them?

My knowledge of the "grandchild" selector in CSS was limited until I came across this insightful article. Intrigued, I decided to experiment with it and found that it resembles the universal selector (which targets all elements). Let's take a look at ...

Detecting collisions with other objects in HTML/CSS/JavaScript while animating objects

Does anyone know how to create a dynamic character using css, html, and javascript, and detect collisions with other elements? Any suggestions or guidance would be greatly appreciated. ...

Determine whether the element is visible in at least half of the viewport

I am working on a project that involves 4 cards with images. I want the image to animate in from the left when it comes into viewport. I have finalized the CSS for this effect, but the JavaScript code always returns false even when the element is visible o ...

Angular does not display results when using InnerHtml

I'm currently in the process of creating a weather application with Angular, where I need to display different icons based on the weather data received. To achieve this functionality, I have developed a function that determines the appropriate icon to ...

Utilizing jQuery to attach events to dynamically generated elements

I have a scenario where I am uploading multiple images and inserting them into specific div elements. These divs should toggle a class when clicked. Should I include the part of code that adds the onclick event inside the ajax success function? Your help i ...

Enforcing HTTPS in Next.js version 13

I've encountered a challenge while working with Next.js 13 and Heroku - there seems to be limited information on handling SSL with this combination. Although I have implemented a solution derived from this blog post below, Google is not happy with the ...

The HTML code does not display list items

I'm having trouble getting the image to display in the list element of my toolbar creation. Here is my CSS and HTML code: ...

Steps for modifying the look of a button to display an arrow upon being clicked with CSS

Looking to enhance the visual appearance of a button by having an arrow emerge from it upon clicking, all done through CSS. Currently developing a React application utilizing TypeScript. Upon clicking the next button, the arrow should transition from the ...

How to handle FilePond uploads that need to be reverted when the DELETE request lacks a unique ID?

As a new user, I've been struggling with this issue for quite some time The problem I'm facing is that when I click the close button to undo the upload of a file, it triggers a DELETE request to the backend (using Express). However, the req.body ...

Troubleshooting an issue with importing a Component in ReactJS using material-ui

Using the material-ui library, I attempted to create a Table following the code provided in the Custom Table Pagination Action example. However, I encountered the following error: Error Encountered: Warning: React.createElement: type is invalid -- expect ...

What is the best way to align this form perfectly in Bootstrap 4?

HTML <div class="container-fluid background"> <div class="row"> <!-- background effect --> <div id="particles-js"> <div class="login col-12"> <form class="login-form" method="post" action=""> ...

What steps can I take to ensure that the original field does not regain focus once the dialog is closed?

My users prefer not to switch from the keyboard to mouse while filling out an input form. To address this, I am using the onFocus event to display a JQuery UI Dialog. However, when I use the dialog's close(); function, the dialog reopens as the origin ...

Issue with the camera functionality in phonegap 3.3.0 API on IOS platform

I am currently in the process of developing an application for iPad that will allow users to capture and store photos. I have encountered some difficulties while using the PhoneGap camera API library, as my code is not generating any errors which makes i ...

Exploring uncharted territory with the Navigator component in React Native

I am experiencing an issue with undefined navigator when using React Native MessageTabs: _onPressItem = (item) => { const { navigate } = this.props.navigation; //console.log(JSON.stringify(item)); navigate('SingleConversation', {id ...

Tips for selecting a specific input field in a ReactJS component with multiple inputs

I am currently developing a ReactJS application where I have implemented a component responsible for generating an HTML table. Within this component, I utilize Map to create rows using a child component. These rows contain multiple input fields that users ...

Using navigation.navigate() in React-Native to navigate between screens

I am facing an issue with my react native app where I need to navigate to a specific component (ViewDrafts) on button click. However, despite trying different solutions, I keep encountering errors. const App = ({ navigation }) => { //some code written h ...