Bootstrap: Working with fullscreen background images & text. How can I design a homepage similar to teamtreehouse.com?

Question

I'm trying to create a design with Bootstrap similar to the homepage of teamtreehouse.com. How can I achieve this?

My current problems/challenges are:

1) Getting the image to go behind the navigation.

2) Getting the text to overlay the responsive image(s) and become responsive.

(fyi I'm using the most current version of bootstrap)

Code:

HTML:

<!DOCTYPE html>
<html>
<div class="wrapper">
  <head>
    <title>Coming Soon</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/my-styles.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <!--Navbar -->
      <div class="container">
        <header class="page-header">
          <ul class="nav nav-pills pull-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Blog</a></li>
          </ul>
          <h3>Coming Soon!</h3>
        </header>
        </div><!--End Navbar -->

    <!--1st Large Banner Image -->
    <div class="wrapper">
       <img src="pic_1.jpg" class="img-responsive" alt="Responsive image">
        <div class="sol-sm-6">
        <h1 id="text">Hello World!</h1>
        </div>
     </div>

 <!--Main Content -->  
    <div class="wrapper">
      <div class="container">
        <h1> Main content</h1>
    </div>
</div>

 <!--2nd Large Banner Image -->
   <div class="wrapper">
       <img src="pic_2.jpg" class="img-responsive" alt="Responsive image">
        <h1>More info!</h1>
  </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
</div><!--End wrapper fullwidth-->
</html>

CSS in my-style.css:

.wrapper {
    width: 100%;
    background-color: lightcyan;
}

img {
    background-image: url(pic_1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

#text {
    z-index:100;
    position:absolute;    
    color:white;
    font-size:100px;
    font-weight:bold;
    left:150px;
    top:350px;
}

Answer 1 · 2014-01-13T06:52:50Z

January 13, 2014 6:52am

you will need your image to be displayed absolute as well, or z-index will have no effect.

Also, check out the css clipping mask property: http://www.html5rocks.com/en/tutorials/masking/adobe/

This might help you achieve the see through or overlay property that you are going for, but I am assuming just opacity: .7; or something will work.

Cheers!

Answer 2 · 2014-01-14T00:11:32Z

January 14, 2014 12:11am

Michael,

I really appreciate your response, I tried to apply your suggestion by adding "position: absolute;" to my "img" css but I'm stilling having the same trouble. The image will still not go behind the navigation. And after reading the tutorial you linked to I'm still unsure how this technique would help me keeping my text within the content area of my image and scale properly.

Guil Hernandez since you have worked with bootstrap and knowledgable about css could you please take a look at my post and help me out?

Thanks!!!

Answer 3 · 2014-01-14T01:22:05Z

January 14, 2014 1:22am

Sure, here is the codepen: http://cdpn.io/unjxi I posted to codepen as the files above show (without your adjustment). Here's a link to the website: https://dl.dropboxusercontent.com/u/40665984/decks/index.html

Answer 4 · 2014-01-14T20:39:15Z

January 14, 2014 8:39pm

Guil Hernandez

Thanks so much for your help! I have taken the images out of the HTML. And now I have been able to place them behind the navigation. However, could you please help me know how to scale them properly?

Do you know if you can use the bootstraps' built in responsive image class? <img src="..." class="img-responsive" alt="Responsive image">

Or,

Do I need to use media queries? Or is there some other "Best approach"?

Thanks in advance!

Here's a link to the site: https://dl.dropboxusercontent.com/u/40665984/decks/index.html

(PS for some reason the images work on my localhost but I'm having trouble seeing them on the live site.)

Here's the code: ''' <!DOCTYPE html> <html> <div class="header pic1"> <head> <title>Coming Soon</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/my-styles.css" rel="stylesheet" media="screen">   </head> <body>

<!--Navbar -->
  <div class="container">
    <header class="page-header">
      <ul class="nav nav-pills pull-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
      <h3>Coming Soon</h3>
    </header>
    <h1>Hello World</h1>
    </div><!--End Navbar -->

</div>

<div class="main"> <div class="container"> <h1>Another h1 header</h1> </div> </div>

<!--Main2 Content -->

<div class="main2"> <div class="container"> <h1>Another h1 header</h1> </div> </div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/40665984/decks/js/bootstrap.js"></script>

</body> </div> </html>

''' Here's the css

''' .pic1 { width: 100%; height: 100%; background: url('/decks/pic_1.jpg') no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

.header { height: 600px; }

h3 {color: white; font-size: 2em; }

h1 {color: white; font-size: 4em; }

.main { background-color: lightblue; width: 100%; height: 600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

.main2 { width: 100%; height: 600px; background: url('/decks/pic_2.jpg') no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } '''

Welcome to the Treehouse Community

Looking to learn something new?

Isaac Russell

Isaac Russell

Bootstrap: Working with fullscreen background images & text. How can I design a homepage similar to teamtreehouse.com?

4 Answers

Michael Hinrichs

Michael Hinrichs

Isaac Russell

Isaac Russell

Michael Hinrichs

Michael Hinrichs

Isaac Russell

Isaac Russell

Michael Hinrichs

Michael Hinrichs

Guil Hernandez

Guil Hernandez

Isaac Russell

Isaac Russell