When using a CSS background image in ReactJS, a white space may appear at the bottom of the window

Currently, I am working on creating a background for a React website and implementing it in the div above component. My purpose is to have this background only appear on specific components and not throughout the entire website.

However, I am encountering an issue where there is white space beneath the image when I scroll or resize the window. Additionally, I am unable to use the image in CSS as I need to store it in a variable later on - so I am restricted to using inline styles.

I would greatly appreciate any helpful feedback or suggestions on how to address these challenges.

render(){
return (
  <div style={{ backgroundImage: `url(${background})`,height:"100vh",backgroundSize : "100% 100%",backgroundAttachment: "scroll", backgroundRepeat: "norepeat", backgroundPosition: "center center"}}>
      <div style={{paddingTop : '5%'}}>
    <Registration />
    </div>
     </div>

);
}

Answer №1

Ensure that this is integrated within the styles object

"backgroundSize": "cover"

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

Tips for preventing multiple useEffects from running when passing react.element as a prop

In my project, I have a List component that handles the same logic for lists. One issue I encountered is that the useEffect in the child component runs every time the state changes. To illustrate, here is a simplified code snippet: saga export function* ...

How can you nest a map within a map in JavaScript?

Here is the code snippet I am working with: _renderChannels() { return this.state.channelsData.map(channelData => { return this.state.channelsStreamData.map(channelStreamData => { return <Channel channelData={channelData} ch ...

How can I align images of varying sizes to the bottom using Bootstrap 4 or CSS?

I'm having an issue with CSS align-xxxx:bottom not working. I want to align images of different heights at the bottom. .width-book{ width: 100px; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="s ...

Exploring Material UI's Typography fontSize feature

After upgrading my material UI version from 3.9.4 to 4.11.0, I had to make some changes in the theme style override section to fix certain warnings: https://i.sstatic.net/GjzI9.png https://i.sstatic.net/LVHGk.png However, I encountered a challenge with ap ...

What steps can be taken to create a React app for production that won't cause the website to go

Can a react app be successfully built for production using the command npm run build without causing the website to go offline? I have set up nginx to host my react app, but when I execute the mentioned command, I encounter an "Internal server" error unt ...

The parameters 'event' and 'event' are not compatible with each other

I'm currently working on a page that involves submitting a form: import React from 'react'; import Form from 'react-bootstrap/Form'; import { useSignIn } from '../../hooks/Auth/useSignIn'; import { useHistory } from &apos ...

Attempting to ensure that my website is fully optimized for all devices and

I am currently facing an issue with my CSS code on iPad. I want to change the background-image displayed based on whether the user is using an iPad or not. Specifically, I want to use headerold.jpg as the background-image for iPads while keeping headernew. ...

Using object syntax in React state management

I've been working on dynamically updating the state in my React app, and this is what the current state looks like: this.state = { title: "", image: "", imageFile: "", formTitle: "", formMessage: "", formImage: "", ...

Prevent React from redirecting until after the API call is complete

I am currently developing an application using React and Django REST. I am facing an issue where I am trying to update a post and then redirect back to the home screen. However, sometimes the redirect happens before the PUT request is completed. The probl ...

Ways to retrieve the content from a textfield

Is there a way to retrieve text from a textfield in material UI without using the onChange method? It just seems odd that I would need to constantly track the value with onChange in order to use it for any other purpose. I decided to search for solutions ...

Hot Reloading in React with Webpack, no need for Express or Webpack-Dev-Server

My current setup involves a client-server architecture using React+Redux with Webpack to bundle the code into a dist folder. The backend is a go server that serves these files, and I am attempting to enable react-hot-reloading within this configuration. Th ...

Inadequate text alignment

Trying to create a header mockup for a website featuring branding elements like a logo and brand name. Utilizing Angular.js for the webpage development process, incorporating a URL for the logo image from an online source. Encountering alignment issues th ...

Unable to handle a POST request initiated by an HTML Form

Recently, I started working with Express and Bootstrap. While attempting to create a login form that triggers a POST request to the server, I encountered an issue where the page displays "The page isn't working" instead of loading a new HTML page. He ...

Using ES5 in conjunction with material-ui for creating UI components

On the official website, it explains how to import the Module into a project: import { Link } from 'react-router-dom' import Button from '@material-ui/core/Button'; <Button component={Link} to="/open-collective"> ...

Clear the state of the parent element by pressing the button within the child element

I wish to reset the child component's state whenever I click a button in the child component. The Parent Component constructor() { super(); this.state = { events:[], alerts:[], } ...

To enhance user experience, consider incorporating a 'Next Page' feature after the completion of every four paragraphs,

Here is a code snippet that can be used to print 'n' number of paragraphs: <% while(rs.next()){ String para=rs.getString("poems"); %> <p> <%=para%> </p> <!-- n number of p tags are printe ...

Ways to select individual element in a list using onClick in ReactJS while using map function

I have a React component that retrieves data from my Firestore database and displays it on Material-UI cards. However, I'm facing an issue where clicking the ExpandMoreIcon expands all the cards at once. What I want is to be able to expand each card i ...

Challenges with Enzyme setup

I recently started using create-react-app and decided to incorporate testing into my project. Following the instructions on the create-react-app repo, I successfully installed Enzyme. For more information on Enzyme installation, you can check out this link ...

Utilizing React to modify the functionality of elements in the user interface depending on the size of

In this section, I will provide details about my current project. Tech Stack: NextJs (version below 13), ChakraUI (Utilizing predefined components, mainly Flex) The concept is as follows: After testing different screen sizes and determining when UI eleme ...

Having trouble with less.modifyVars not functioning properly in Visual Studio?

I attempted to dynamically change the LESS variable using HTML within an AngularJS function. The code worked fine on XAMPP with simple HTML and CSS, but when I transferred it to an enterprise app in Visual Studio, it stopped functioning properly. While the ...