React.js background full image is not working

Question

I want to display image to full page.

[index.js]

import React, { Component } from 'react';
import './index.css';

export default class index extends Component {
  render() {
    return (
        <div className="container">
            123
        </div>
    );
  }
}

[index.css]

body {
    background: url("../../img/image.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: bisque;
}

But it seems doesn't work properly.

When I made this with html/css(not react), it works perfectly.

How can I solve this issue?

score 2 · Accepted Answer · answered May 13 '18 at 07:17

You should have a look over to this tutorial from css-tricks.com. They explain in full detail on how to get your background image to be displayed on the full page.

In your code you should try to apply the background to the html tag instead of the body tag.

score 1 · Answer 2 · answered May 13 '18 at 07:14

1

Don't remember the correct way of solving this but this helped me out when I searched for the answer.

Setting a backgroundImage With React Inline Styles

answered May 13 '18 at 07:14

G.F

31
1
5

score 1 · Answer 3 · answered Oct 12 '18 at 19:51

Inline style to set any full screen image:

            backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" + ")",
            backgroundPosition: 'center',
            backgroundSize: 'cover',
            backgroundRepeat: 'noRepeat',

score 0 · Answer 4 · answered May 13 '18 at 07:33

The background position sets the starting point of background image to center. So, set background position to its default value(top left).

body {
background: url("../../img/image.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-color: bisque;}

React.js background full image is not working

4 Answers4