Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Shaked Gvirtsman
Shaked Gvirtsman
2,270 Points
Posted by Shaked Gvirtsman
Shaked Gvirtsman
2,270 Points

How to put an h1 on the background of my header

So after finishing the lake taho course, I decided to build my own website. I'm struggling putting text on my background like in the site we created in the course. Can someone help me, please? I want the text that is under the background to the top of it (like the navigation menu. Also, I would like to know if there is a more simple way to put the navigation bar in the middle from the way that I did. And one last question, is it ok that I look a lot online to find the CSS commands I need?

This is my CSS code:

         * {
  box-sizing: border-box;
}
header {
  padding-top:120px;
  height: 550px;
}

#navigation-bar li {
  color: green;
  display: inline;
 padding: 0px 15px 5px;

 background-color: lightblue;
  text-align:center;
}
nav {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: absolute;
  top: 10px;

   left:30%;


}


.slogan {
    color: red;
    font-weight:100;
    text-align:center;
    display:inline-block;
    margin-top: 20px;
}
.main-header {
  background: url("https://gratisography.com/thumbnails/gratisography-436-thumbnail.jpg") no-repeat center;
  background-size: cover;

    padding: 900px 25px 0;
}
.welcome {
  text-align: center;
}



          ```






this is my HTML code:
          ```html
<!DOCTYPE html>
<html>
        <head>
            <title>my site</title>
      <link rel="stylesheet" href="styles.css">
    </head>
    <header class="main-header">
    <nav>
      <ul id="navigation-bar">
        <li>About Me</li>
        <li>Lectures</li>
        <li>gallery</li>
        <li>contact me</li>
      </ul>
     </nav>

        <h1 class="welcome">Welcome to my site</h1>
    <h1 class="slogan">The right tools are the key to <strong>sucess</strong></h1>

    </header>


</html>





          ```

1 Answer

Gabriel Plackey
Gabriel Plackey
11,064 Points
Gabriel Plackey
Gabriel Plackey
11,064 Points

To get the text in the right position your going to want to mess around with where it is in the html. As for making it see-through and what not. You'll probably want to mess around with the z-index and opacity of the text and/or background.

Shaked Gvirtsman
Shaked Gvirtsman
2,270 Points
Shaked Gvirtsman
Shaked Gvirtsman
2,270 Points

That doesn't help. I tried it already:(