bootstrap-如何在响应图像上放置文本

Question

I am trying to get this layout

I've used this code for the background image

<div class="container-fluid" style="padding: 0px;">
        <img class="img-responsive center-block header1" src="images/header.jpg" />
</div>

After that I don't know how to use bootstrap to position the logo or the navbar over the background image like given in the above image.

Can anyone give me which bootstrap class or tag is going to be used? or will I have to use custom css?

Thanks in advance.

Answer 1

Try the below,

You can set the background-image using css..Also i will recommend you to use this because there will be issues if you make the elements absolute in responsive.

 .img-full { height: 300px; background-image: url('http://www.aegisworld.com/wp-content/uploads/2013/06/65-3.jpg'); background-repeat: no-repeat; background-position: center; background-size: 100%; } .navbar { margin-top: 20px; } .navbar.navbar-default { background-color: transparent; border-color: transparent; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="img-full"> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Contact</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a> </li> <li><a href="#">One more separated link</a> </li> </ul> </li> </ul> </div> <!--/.nav-collapse --> </div> <!--/.container-fluid --> </nav> </div> </div> 

Answer 2

It's not a Bootstrap feature, you have to apply position:relative; to container DIV, and then using positition:absolute; with appropriate top and left/right offset for inner ones.

<div class="container-fluid" style="padding: 0px;">
        <img class="img-responsive center-block header1" src="images/header.jpg" />
        <div class='inner'>......</div>
</div>

.container-fluid {
  position:relative;
}

.inner {
  position:absolute;
  top:10%;
  right:20%;
}

This is right if you want to preserve your user of img SRC way to place image. Otherwise you can transform it into a background and so, is no necessary relative/absolute positioning but you must set a size (width and height) on DIV that have this image as background

Answer 3

You need to set the image as the background of the DIV. You can use the following CSS to do that. Then you can add your content to the DIV and style/place accordingly

.container-fluid{
    background:url('images/header.jpg') no-repeat;
    background-size:100% auto;
}

You also need to set the height of the DIV to the height of the image or the desired height.

Answer 4

Actually you have 2 options here

Put the backgroun image in the body

body {
background:bg.jpg top center
}

Add your nav-bar

nav-bar {
position:fixed
z-index:9999
}

I think that would work