How to set my background image fit to screen in React

user_5493372 0
Viewed 9632

I am trying to set background image in a component but its is not showing. here is my code for home component.

homecomponent.js

import React, { Component } from "react";
import logo from "./logo.png";
import CreateUser from "./create-user.component";
import { BrowserRouter as Switch, Route, Link } from "react-router-dom";
import "./custom.css";

export default class home extends Component {
  render() {
    return (
        <div className="container-fluid homepage-bgimage"></div>
    );
  }
}

custom.css file code - 

.homepage-bgimage {
  background: url("http://abcd.com/static/media/slide.504dc6e6.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

I have also added body html to 100 % in index.css file but background image is still not showing.

twitter-bootstrap reactjs
2 Answers

It's working, seems like you need to rename your component to Home instead of home

.homepage-bgimage {
  background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
<div class="container-fluid homepage-bgimage"></div>

user_55673870

You need change height measure from % to vh or you must set size for your container where image is placed, because now it's 0 and image takes 100% from 0px. You can set for container 100vh and set 100% for bgimage

user_103986830
Related