score:24
try using the specific property values.
in index.css:
body, html {
height: 100%;
margin: 0;
}
in login.css:
.login-component {
/* the image used */
background-image: url(../static/login-bg.jpg);
/* full height */
height: 100%;
/* center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
score:0
while it is hard to troubleshoot without any code, check the root element to which your react component is being rendered to. setting height: '100%'
in the style of your component will be in the context of it's parent div.
score:0
edit the css.
this might be what you are looking for:
<component style={{ minheight: '100%' }} />
if you meant that the background image is not covering the whole height, then add a classname to your component, import the css where you'll do something like this
score:17
the image should be inside your src folder besides that, inside your component you do the following.-
const imgmyimageexample = require('../assets/imageexample.jpg');
const divstyle = {
width: '88%',
height: '800px',
backgroundimage: `url(${imgmyimageexample})`,
backgroundsize: 'cover' <---- this is important
};
export default class mycomponent extends react.component {
render() {
return (
<div classname="ccomponent" style={divstyle} >
<h1 align="center">some header example</h1>
</div>
);
}
}
score:32
use vh and vw properties:
const styles = {
container: {
backgroundimage: `url(${backgroundimage})`,
backgroundposition: 'center',
backgroundsize: 'cover',
backgroundrepeat: 'no-repeat',
width: '100vw',
height: '100vh'
}
};
Source: stackoverflow.com
Related Query
- Set background image to full screen in Reactjs
- How to display an image in full screen background using reactJS and css?
- How to set a full background image in CSS using reactjs style?
- cant get background image on full screen size in reactjs
- reactjs background image not coming on full screen
- How can I apply page specific Full screen background image using React?
- ReactJS Styling a Component to take full screen with background color
- How to set my background image fit to screen in React
- How to set a background image for all pages in reactjs
- How to set background image in Reactjs using external css?
- Set image as full background in React.js
- Setting background image to full screen React
- Need to set background image from API response in ReactJS
- Set background image for one component differently in ReactJS
- Set SVG Animation as background image - ReactJS
- How to set background image for entire screen in app js file in react js?
- How to set properties of background image in reactJS
- How to set a background image in reactjs?
- ReactJS change background image dynamically?
- Gatsby: Set background image with CSS
- React makeStyles doesn't set background image
- React-native: How to set image in background of Layout(View)
- Set background image url using inline css in react js
- Using material-ui's APIs, how do I set a background image in the body?
- Can't load a local background image in ReactJS
- Reactjs Howto Blur Background image on scroll?
- Is there any way to set a background colour to the full column for Saturday and Sunday in 'React Full Calendar'
- set background image through function or variable
- how do I set a background image on div in react js?
- How to set both linear-gradient and background image in a specific div using styles in React
More Query from same tag
- how to call parent function controller from directive react component angularjs + reactjs?
- Range piker in react js
- How to prevent collapseWhitespace in create-react-app
- React Search Bar - runs twice after each search
- How to access state inside Redux reducer?
- Filtering logic for an array of object based on tabs
- What to pass to super when there are no props?
- How to change whole content of the page
- why useEffect hook not working as expected - how its related to useState?
- Redirect to Parent Route with Parameter in React Router
- react-router v6: Navigate to a URL with searchParams
- How to set cookie to next js application from separate server?
- React Component Function with Each child in a list should have a unique "key" prop. Check the render method
- Jest: Cannot read property 'secondary' of undefined - after MUI upgrade from V4 toV5
- React Too many re-renders when using setState hook inside callback function
- Semantic-ui-react; footer at the bottom of the page
- How to populate img src with event.target.files before saving image to server
- How can I store multiple data in state using spread operator
- Serving a static html page using flask, with a parameter
- Search functionality in reactjs
- ./src/App.js 83:48-54 "export 'default' (imported as 'Signup') was not found in './Signup.js'
- React - What is the best way to handle login and authentication?
- How to pass an Array of objects from Redux store to component in React?
- how do I clearInterval on-click, with React Hooks?
- react js getting error when i use serverside datatable
- javascript/react dynamic height textarea (stop at a max)
- Default Tab is adding twice in React JS
- Donut Chart : Trigger legend or pie click event while selecting outside filter state change
- React.js How to loop through multiple API data arrays and add data to table
- What is the correct pattern in ReactJS lifecycle (v. 16.4) to pass data