CODEWITHSUNDEEP
cssreactjs
Tim
Tim

Reputation: 2411

Reactjs - Full image not appearing

I'm having troubles with getting my full image to appear and I was wondering what's wrong with my current approach?

The image that I'm trying to set to full-size is enter image description here

However, this is what is renderingenter image description here

I'm setting my height to 100% so I'm not sure why it's only appearing with the text :-(

.App {
  text-align: center;
  height:100%;
  width:100%; 
}

body, html {
    height:100%;
    width: 100%;
}

.bg { 
    /* The image used */
    background-image: url("./../../images/City.png");

    /* Full height */
     height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

my App.js:

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

class App extends Component {
   render() {
      return <div className="App">
         <div className="bg">
            hello world
         </div>
     </div>;
   }
}

Thanks for your help!

Edit: What it looks like after I tried one of the demos from the replies

enter image description here

Upvotes: 1

Views: 93

Answers (2)

Dacre Denny
Dacre Denny

Reputation: 30360

This will depend on the CSS of your .App, and will also depend of the DOM/HTML structure that wraps/contains the div where your city background image is displayed.

Consider updating the CSS for .App as follows:

.App {
  display:flex; 
  height:100%;
  width:100%; 
}

You may also need to ensure that the actual html and body elements of your DOM are styled to cover your entire client view area in the browser (depending on your website's structure):

html, body {
  display:flex;
  height:100%;
  width:100%;
}

For a full working demo, please see this jsFiddle. Hope this helps!

Note, you shouldn't copy the HTML from this jsFiddle directly. JSX/React requires that you use the className attribute to specify a DOM element's class.

So:

<div class="App">
  <div class="bg">
    hello world
  </div>
</div>

should be updated to:

<div className="App">
  <div className="bg">
    hello world
  </div>
</div>

in your component's render() method.

Upvotes: 1

Shadi Alnamrouti
Shadi Alnamrouti

Reputation: 13248

Add this to bg div CSS:

.bg{
min-height: 600px; /*For example*/
}

because the bg div takes the height of its content if min-height is not specified.

Another solution is to put the image in a normal image element and make the bg div absolute over it.

For example (using inline CSS for explanation )

<div class="App" style="position:relative;width:100%;">
    <img src="the path" style="width:100%; height:auto;" />
    <div class="bg" style="position:absolute;top:0;left:0;right:0;bottom:0;"
         hello world!
    </div>
</div>

Upvotes: 1

Related Questions