CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Magnus Nicoll
Magnus Nicoll

Reputation: 75

How do I create Footer below background image?

As you'll see I'm trying to create a footer of images in a row below the background image, yet I'm not entirely sure what the best way would be. When I attempt to position the footer in the bottom it ends up above the <h> elements. Also is the reason for my row being on two because of the width of the images?

.navbar-nav>li {
  float: none;
}
.navbar-default {
  background-color: rgba(255, 255, 255, 0);
  border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: rgba(150, 155, 155, );
}
.navbar {
  margin-bottom: 0 !important;
}


.list {
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: bolder;
    
}

.synopsis {
      color:white;
      text-align: center;
}

.teampics .row {
    margin-top: 17%;
    text-align:center;
}
<!DOCTYPE html>
<html>

<head>
  <meta content="width=device-width, initial-scale=1" name="viewport">

  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
  </script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
  </script>
  <link href="Calums2.css" rel="stylesheet">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
</head>


<body>
    
    <div class="person">
    <img height="100%" src="http://i.imgur.com/pE2NrKh.jpg" style="position: absolute; top: 0; left: 0;" width="100%">
    </div>
    
  <div class="list" style="Position: absolute; top: 0px; left:0px;">
      <div class="navbar navbar-default">
          <nav class="navbar navbar-default">
          <ul class="nav nav-justified navbar-nav">
        <li><a href="Home.html"><h2>Home</h2></a></li>
        <li><a href="team.html"><h2>Team</h2></a></li>
        <li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li>
        <li><a href="Blog.html"><h2>Blog</h2></a></li>
        <li><a href="Expeditions.html"><h2>Expeditions</h2></a></li>
                 </ul>
              </div>
        </nav>
       <style>
      text-align:justify;
       </style>
      </div>
    </div>
    
    


    
    
    <div class="col-sm-4" style="position: absolute;bottom: 0px; left: 0px;">
        <div class="synopsis">
          <h3>Barrett's Privateers</h3>
          <h5>We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
            </div
            </div>
        </div>
        
<div class="sponsorfooter" style="position: absolute;bottom: 0px; left: 0px;">
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_1eab1592deae4a06927c22dd9435c1d6.jpg/v1/fill/w_196,h_90,al_c,q_75,usm_0.50_1.20_0.00/83f988_1eab1592deae4a06927c22dd9435c1d6.jpg></div>
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_a874687813fefff04482e59d0a287e96.jpg/v1/fill/w_176,h_82,al_c,q_75,usm_0.50_1.20_0.00/83f988_a874687813fefff04482e59d0a287e96.jpg></div>
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_e495c4e400db4cfca085bf8540069272.jpg/v1/fill/w_120,h_120,al_c,q_75,usm_0.50_1.20_0.00/83f988_e495c4e400db4cfca085bf8540069272.jpg></div>
    <div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_60ec121fab6a43ef81217b60b0c805f5.jpg/v1/fill/w_178,h_90,al_c,q_75,usm_0.50_1.20_0.00/83f988_60ec121fab6a43ef81217b60b0c805f5.jpg></div>
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_049efbb23a743e7cc054b9b4b298232b.png/v1/fill/w_160,h_176,al_c,usm_0.50_1.20_0.00/83f988_049efbb23a743e7cc054b9b4b298232b.png></div>
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_f3ee99e41d67a3553c962074edb27d8c.jpg/v1/fill/w_296,h_68,al_c,q_75,usm_0.50_1.20_0.00/83f988_f3ee99e41d67a3553c962074edb27d8c.jpg></div>
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_4803fc6cbb10000fe9ca77e29aa326cd.jpg/v1/fill/w_158,h_72,al_c,q_75,usm_0.50_1.20_0.00/83f988_4803fc6cbb10000fe9ca77e29aa326cd.jpg></div>
    <div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg/v1/fill/w_168,h_78,al_c,q_75,usm_0.50_1.20_0.00/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg</div>
    <div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg/v1/fill/w_168,h_78,al_c,q_75,usm_0.50_1.20_0.00/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg></div>
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_14c382ea18bfee9aace258f8442f6af1.png/v1/fill/w_256,h_120,al_c,usm_0.50_1.20_0.00/83f988_14c382ea18bfee9aace258f8442f6af1.png></div>
    <div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_ddf046663ed7bcd9a804c6baa00bde75.jpg/v1/fill/w_280,h_72,al_c,q_75,usm_0.50_1.20_0.00/83f988_ddf046663ed7bcd9a804c6baa00bde75.jpg></div>
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_64852a4616aa432092e85b3cef276674.jpg/v1/fill/w_164,h_98,al_c,q_75,usm_0.50_1.20_0.00/83f988_64852a4616aa432092e85b3cef276674.jpg></div>
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_19fb52bb10e03c36338f2c2f61f8092d.jpg/v1/fill/w_158,h_74,al_c,q_75,usm_0.50_1.20_0.00/83f988_19fb52bb10e03c36338f2c2f61f8092d.jpg></div>
        
        
        
        
        
        
        
    </div>
    
    
    
    
    
    
    
</body>

</html>

Upvotes: 3

Views: 1541

Answers (3)

Sourajit
Sourajit

Reputation: 193

May be you want something like this...Your code had many errors including unclosed divs..Further the logo images needed to be made responsive with the img-responsive class so as to fit nicely...next I added a 'textover' div for displaying the text over the image and made the image as the background image of another div called content..here I gave min-width:848pxfor content as it is the width of the background image 

<!DOCTYPE html>
<html>

<head>
  <meta content="width=device-width, initial-scale=1" name="viewport">

  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
  </script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
  </script>
  <link href="Calums2.css" rel="stylesheet">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<style>
.navbar-nav>li {
  float: none;
}
.navbar-default {
  background-color: rgba(255, 255, 255, 0);
  border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: rgba(150, 155, 155, );
}
.navbar {
  margin-bottom: 0 !important;
}


.list {
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: bolder;
    
}

.synopsis {
      color:white;
      text-align: center;
}

.teampics .row {
    margin-top: 17%;
    text-align:center;
}
.content
{
background-image:url("http://i.imgur.com/pE2NrKh.jpg");
background-repeat:no-repeat;
		
}

</style>
</head>


<body >
<div class="content" style="position:relative;top:0px;min-height:848px;" >

<div class="textover" style="position:absolute;top:0px;" > 
 <div class="list" >
      <div class="navbar navbar-default" >
          <nav class="navbar navbar-default">
          <ul class="nav nav-justified navbar-nav">
        <li><a href="Home.html"><h2>Home</h2></a></li>
        <li><a href="team.html"><h2>Team</h2></a></li>
        <li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li>
        <li><a href="Blog.html"><h2>Blog</h2></a></li>
        <li><a href="Expeditions.html"><h2>Expeditions</h2></a></li>
                 </ul>
              </div>
        </nav>
      </div>
    
    <div class="rows" > 
    
    <div class="col-sm-12" >
        <div class="synopsis">
          <h3>Barrett's Privateers</h3>
          <h5>We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
            </div>
            </div>
	</div>
 
	</div>

</div>
<div class="sponsorfooter" style="position:relative;top:0px;margin-top:5px;">
	<div class="rows" > 
    <div class="col-sm-1 " ><img src="https://static.wixstatic.com/media/83f988_1eab1592deae4a06927c22dd9435c1d6.jpg/v1/fill/w_196,h_90,al_c,q_75,usm_0.50_1.20_0.00/83f988_1eab1592deae4a06927c22dd9435c1d6.jpg" class="img-responsive"/></div>
    <div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_a874687813fefff04482e59d0a287e96.jpg/v1/fill/w_176,h_82,al_c,q_75,usm_0.50_1.20_0.00/83f988_a874687813fefff04482e59d0a287e96.jpg" class="img-responsive"/></div>
    <div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_e495c4e400db4cfca085bf8540069272.jpg/v1/fill/w_120,h_120,al_c,q_75,usm_0.50_1.20_0.00/83f988_e495c4e400db4cfca085bf8540069272.jpg" class="img-responsive"/></div>
    <div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_60ec121fab6a43ef81217b60b0c805f5.jpg/v1/fill/w_178,h_90,al_c,q_75,usm_0.50_1.20_0.00/83f988_60ec121fab6a43ef81217b60b0c805f5.jpg" class="img-responsive"/></div>
    <div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_049efbb23a743e7cc054b9b4b298232b.png/v1/fill/w_160,h_176,al_c,usm_0.50_1.20_0.00/83f988_049efbb23a743e7cc054b9b4b298232b.png" class="img-responsive"/></div>
    <div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_f3ee99e41d67a3553c962074edb27d8c.jpg/v1/fill/w_296,h_68,al_c,q_75,usm_0.50_1.20_0.00/83f988_f3ee99e41d67a3553c962074edb27d8c.jpg" class="img-responsive"/></div>
    <div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_4803fc6cbb10000fe9ca77e29aa326cd.jpg/v1/fill/w_158,h_72,al_c,q_75,usm_0.50_1.20_0.00/83f988_4803fc6cbb10000fe9ca77e29aa326cd.jpg" class="img-responsive"/></div>
    <div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg/v1/fill/w_168,h_78,al_c,q_75,usm_0.50_1.20_0.00/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg"class="img-responsive"/></div>
    <div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_14c382ea18bfee9aace258f8442f6af1.png/v1/fill/w_256,h_120,al_c,usm_0.50_1.20_0.00/83f988_14c382ea18bfee9aace258f8442f6af1.png" class="img-responsive"/></div>
    <div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_ddf046663ed7bcd9a804c6baa00bde75.jpg/v1/fill/w_280,h_72,al_c,q_75,usm_0.50_1.20_0.00/83f988_ddf046663ed7bcd9a804c6baa00bde75.jpg" class="img-responsive"/></div>
    <div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_64852a4616aa432092e85b3cef276674.jpg/v1/fill/w_164,h_98,al_c,q_75,usm_0.50_1.20_0.00/83f988_64852a4616aa432092e85b3cef276674.jpg" class="img-responsive"/></div>
	<div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_19fb52bb10e03c36338f2c2f61f8092d.jpg/v1/fill/w_158,h_74,al_c,q_75,usm_0.50_1.20_0.00/83f988_19fb52bb10e03c36338f2c2f61f8092d.jpg" class="img-responsive"/></div>     
   </div>
</div> 
    
    
    
    
</body>

</html>

Upvotes: 0

cssyphus
cssyphus

Reputation: 40058

You have several extra DIVs in your code, and one DIV that isn't properly closed.

Try this HTML instead:

<div class="person">
    <img height="100%" src="http://i.imgur.com/pE2NrKh.jpg" style="position: absolute; top: 0; left: 0;" width="100%">
</div>

<div class="list" style="Position: absolute; top: 0px; left:0px;">
    <div class="navbar navbar-default">
        <nav class="navbar navbar-default">
            <ul class="nav nav-justified navbar-nav">
                <li><a href="Home.html"><h2>Home</h2></a></li>
                <li><a href="team.html"><h2>Team</h2></a></li>
                <li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li>
                <li><a href="Blog.html"><h2>Blog</h2></a></li>
                <li><a href="Expeditions.html"><h2>Expeditions</h2></a></li>
            </ul>
        </nav>
    </div>
  <style>
    text-align:justify;
  </style>
</div>


<div class="col-sm-4" style="position: absolute;bottom: 0px; left: 0px;">
    <div class="synopsis">
        <h3>Barrett's Privateers</h3>
        <h5>We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
    </div>
</div>

<div class="sponsorfooter" style="position: absolute;bottom: 0px; left: 0px;">
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_1eab1592deae4a06927c22dd9435c1d6.jpg/v1/fill/w_196,h_90,al_c,q_75,usm_0.50_1.20_0.00/83f988_1eab1592deae4a06927c22dd9435c1d6.jpg></div>
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_a874687813fefff04482e59d0a287e96.jpg/v1/fill/w_176,h_82,al_c,q_75,usm_0.50_1.20_0.00/83f988_a874687813fefff04482e59d0a287e96.jpg></div>
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_e495c4e400db4cfca085bf8540069272.jpg/v1/fill/w_120,h_120,al_c,q_75,usm_0.50_1.20_0.00/83f988_e495c4e400db4cfca085bf8540069272.jpg></div>
    <div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_60ec121fab6a43ef81217b60b0c805f5.jpg/v1/fill/w_178,h_90,al_c,q_75,usm_0.50_1.20_0.00/83f988_60ec121fab6a43ef81217b60b0c805f5.jpg></div>
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_049efbb23a743e7cc054b9b4b298232b.png/v1/fill/w_160,h_176,al_c,usm_0.50_1.20_0.00/83f988_049efbb23a743e7cc054b9b4b298232b.png></div>
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_f3ee99e41d67a3553c962074edb27d8c.jpg/v1/fill/w_296,h_68,al_c,q_75,usm_0.50_1.20_0.00/83f988_f3ee99e41d67a3553c962074edb27d8c.jpg></div>
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_4803fc6cbb10000fe9ca77e29aa326cd.jpg/v1/fill/w_158,h_72,al_c,q_75,usm_0.50_1.20_0.00/83f988_4803fc6cbb10000fe9ca77e29aa326cd.jpg></div>
    <div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg/v1/fill/w_168,h_78,al_c,q_75,usm_0.50_1.20_0.00/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg</div>
    <div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg/v1/fill/w_168,h_78,al_c,q_75,usm_0.50_1.20_0.00/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg></div>
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_14c382ea18bfee9aace258f8442f6af1.png/v1/fill/w_256,h_120,al_c,usm_0.50_1.20_0.00/83f988_14c382ea18bfee9aace258f8442f6af1.png></div>
    <div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_ddf046663ed7bcd9a804c6baa00bde75.jpg/v1/fill/w_280,h_72,al_c,q_75,usm_0.50_1.20_0.00/83f988_ddf046663ed7bcd9a804c6baa00bde75.jpg></div>
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_64852a4616aa432092e85b3cef276674.jpg/v1/fill/w_164,h_98,al_c,q_75,usm_0.50_1.20_0.00/83f988_64852a4616aa432092e85b3cef276674.jpg></div>
    <div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_19fb52bb10e03c36338f2c2f61f8092d.jpg/v1/fill/w_158,h_74,al_c,q_75,usm_0.50_1.20_0.00/83f988_19fb52bb10e03c36338f2c2f61f8092d.jpg></div>
</div>

jsFiddle Demo

Upvotes: 2

hardcoder
hardcoder

Reputation: 184

This is because you gave height for your background image as 100%. Reduce the height.

Upvotes: 0

Related Questions