Home / Questions / 277347
Accepted
Ceci Benitez
Asked: 2020-07-08 14:23:14 +0800 CST 2020-07-08 14:23:14 +0800 CST

Why is background-size: cover not working when rendering with React?

  • 772

I am trying to use an image as the background of my div but I want a width of 100% and in my styles it says background-size: coverbut it still doesn't work.

render() { 
        
        return ( 
            <div className = "page-header header-filter bg-image">
                <h2>Register</h2>
                <form onSubmit = {this.handleSubmit} >
                    {this.renderInput("username", "Username")}
                    {this.renderInput("password", "Password", "password")}
                    {this.renderInput("name", "Name")}
                    {this.renderButton("Register")}
                </form>
            </div>
         );
    }
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.bg-image {
  background-image: url('https://github.com/Ceci007/images/blob/master/img-vidly/avengers.jpg?raw=true'); 
  background-size: cover; 
  background-position: center;
}

enter image description here

css

1 Answers

  1. Best Answer

    Define as height 100% (height: 100%;), this will be necessary for it to be seen on the entire screen:

    .bg-image {
  background-image: url('https://github.com/Ceci007/images/blob/master/img-vidly/avengers.jpg?raw=true'); 
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; 

}
    • 0