0

enter image description here

import React from 'react' import pic from './pic2.png' const Header = () => { return (

<div className="container-fluid">
<div className="row text-center align-items-center ">

        <div className="bg col-md-6 ">
            <div style={{ backgroundImage: `url(/pic.jpg)` }}>
            
              </div>

        </div>
        <div className=" col-6">
              <h1>Login</h1>

              <form className='loginf'>
                
                    <label className='pt-4'> Username </label> <br></br>
                    <input type='text'className='form-rounded p-1' placeholder=' username'/>
                    <br></br>   <br></br>
                    <label> Password </label>   <br></br>
                    <input type='password' className='form-rounded p-1' placeholder=' password'/>
              
            
              </form>
              <br></br>           
              <button className='btn btn-basic form-rounded2'>Login </button>


        </div>
</div>
</div>

) }

export default Header

ZreyaZ
  • 1
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community May 27 '22 at 10:25

1 Answers1

0

You have imported a picture, so u can try use object {pic}, not a link to picture

Instead <div style={{ backgroundImage: url(/pic.jpg) }}> Try: <div style={{ backgroundImage: ``url(${pic})` }}>

Similar issue: Setting a backgroundImage With React Inline Styles

Churchill
  • 1
  • 1