'Build a toolbar inside an image in reactjs

Hello i want to build a toolbar that is contained in an image. I am using reactJS and react-bootstrap for simplicity. What i want to achieve is something like this: https://prnt.sc/Q9-2KR1NaMeE

I built the toolbar like the documentation of react-boostrap and i decided to wrap the code with an

<img> tag

The code shown below:

             <img className='bg-img' src={require('../taxi_service_03.jpg')}>
               <Navbar>
                    <Container>
                        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                        <Navbar.Toggle aria-controls="basic-navbar-nav" />
                        <Navbar.Collapse id="basic-navbar-nav">
                            <Nav className="me-auto">
                                <Nav.Link href="#home">Home</Nav.Link>
                                <Nav.Link href="#link">Link</Nav.Link>
                                <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                                <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                                <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                                <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                                <NavDropdown.Divider />
                                <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                                </NavDropdown>
                            </Nav>
                        </Navbar.Collapse>
                    </Container>
            </Navbar>
           </img>

But my image does not appear in the page. I also tried to import the image like this:

import myimg from '../taxi_service_03.jpg';

But again my image does not shown. After that i change the

<img> tag

with a

<div className='bg-img'> tag

My CSS code when i am using div tag:

   .bg-img {
          background-image: url("taxi_service_03.jpg");
          min-height: 650px;

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

          /* Needed to position the navbar */
            position: relative;
       }

My image shown in my page but it is not responsive. When i try to change my CSS code like that

        .bg-img {
          background-image: url("taxi_service_03.jpg");
            width: 100%;
            height: auto;

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

          /* Needed to position the navbar */
            position: relative;
         }

My image becomes responsive in mobiles, but when i am in my main screen i do not see the whole image.

When the image is responsive: https://prnt.sc/Yjys_G_sEGZV

How i can fit my image properly and responsive ?

javascriptcssreactjsreact-bootstrap


Solution 1:[1]

So the Toolbar isn't contained within the image. Think of the toolbar as being overlayed on top of the image. The way this is achieved is to simply have the navbar as item 1 and the image as item 2. item 1's CSS would look like this: .nav{position: Absolute} (obviously rename nav to whatever is appropriate) Position absolute removes its height and width properties from affecting the following elements (ie the image). Hope this helps!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Michael Martell

Related Questions