John Smith John Smith - 6 months ago 11
CSS Question

Image background to a div and another image in top using bootstrap

I am new to HTML and Bootstrap and I am trying to learn it. I have came to a situation, where the images don't display at all.

First image should be full background for the first div and second image, smaller, should be in the top right, using bootstrap.

If someone has any idea please give a hand.

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
.top {
width: 100%;
height: auto;
min-height: 100%;
min-width: 1024px;
background: url('images/img1.jpg') no-repeat;
background-size: cover;

}
.top .text {
position: absolute;
width: 100%;
top: 132px;
right: 351px;
background-image: url('images/img2.jpg') no-repeat;
}
</style>
</head>
<body>
<div class=" top container-fluid">
<div class="row-fluid">
<div class="text col-lg-3 col-lg-offset-5">
<p>Hello</p>
</div>
</div>
</div>
</body>
</html>

Answer

Need to put your min-height in .top according to your mobile device or your smallest device not 100%. and .next the height:auto;. also your min-width is too much large value, so please decrease it as your device width.