CODEWITHSUNDEEP
cssreactjs
tkamath99
tkamath99

Reputation: 649

How to set an image as background image on top of the div container

I have a pattern background which needs to be set on the top of the div which is my container div. I tried by giving the position absolute and top to 0. But the image is not appearing on the top container. I have attached the fiddle below.

class App extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="pattern-top"></div>
        <div>Hello World!</div>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);
.container {
  position: relative;
  width: 100%;
  background-color: #fcbe07;
  padding: 25px 15px;
}

.pattern-top {
  position: absolute;
  background: ur("https://i.ibb.co/NsQ3tXg/Corner-cover.png") repeat-x 0 0;
  top: 0;
  width: 100%;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Upvotes: 0

Views: 43

Answers (1)

Minal Chauhan
Minal Chauhan

Reputation: 6158

You are forgot to add l in background: url("https://i.ibb.co/NsQ3tXg/Corner-cover.png") repeat-x 0 0 and add height in class pattern-top

class App extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="pattern-top"></div>
        <div>Hello World!</div>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);
.container {
  position: relative;
  width: 100%;
  background-color: #fcbe07;
  padding: 25px 15px;
  margin-top:30px;
}

.pattern-top {
  position: absolute;
  background: url("https://i.ibb.co/NsQ3tXg/Corner-cover.png") repeat-x 0 0;
  top: -25px;
  width: 100%;
  height: 100%;
  left:0;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Upvotes: 1

Related Questions