如何将图像设置为 div 容器顶部的背景图像

Question

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>

Answer 1

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>