CODEWITHSUNDEEP
htmlcss
Matthew
Matthew

Reputation: 31

Can't get text to float over background image

I need the text "Relax.Revive.Renew..." to be on top of the background image, right under the header. At the moment it stays at the bottom of the image. I was able to place it there by putting inside the header tag, but the header is sticky, and I need it to scroll with the background.

Here's my html:

<html>
<head>
  <link href='http://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'>
  <title>New Breath Massage</title>
  <!-- The "link" tag identifies your external CSS style sheet. Edit this link to use your particular file  -->
  <link rel="stylesheet" type="text/css" href="stylesheets/main.css" />

</head>
<body>

  <div class="container"> 

    <div class="header"> <!-- contains the constant stuff at the top of the page -->

      <header>
        <div class="logo">
          <img src="images/newBreathLogo.png" width="298" height="100" alt="Logo">
        </div>              
        <nav>
          <ul class="horizNav">
            <li><a href="#offerings">Offerings</a>  |  </li>
            <li><a href="#testimonials">Testimonials</a>  |  </li>
            <li><a href="#arcticles">Articles</a>  |  </li>
            <li><a href="#contact">Contact</a></li>

            <div class="socialIcons">
              <a href="www.facebook.com" target="_blank"><img src="images/facebook-icon.png" width="32" height="32" alt="Facebook Icon"></a>
              <a href="https://plus.google.com/" target="_blank"><img src="images/google-plus-icon.png" width="32" height="32" alt="Google Plus Icon"></a>
              <a href="https://twitter.com/" target="_blank"><img src="images/twitter-icon.png" width="32" height="32" alt="Twitter Icon"></a>
            </div>
          </ul>
        </nav>          
      </div>
    </header>
    <img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />

    <section><!-- landing page (matthew) -->
      <div class="tagline">
        Relax.Revive.Renew...                       
      </div>  
    </section>

Here's the css:

        header{
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 24px;
  line-height: 108px;
  height: 108px;
  background: #fff;
  color: #ccc;
  font-family: 'Helvetica', sans-serif;
  opacity: 0.8;
  border-style: solid;
  border: orange;
}

/*code for full bleed bg image from paulmason.name*/

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  /*min-width: 1024px;*/
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}


#wrapper {
  position: relative;
  width: 800px;
  min-height: 400px;
  margin: 100px auto;
  color: #333;
}
/*END code for full bleed bg image from paulmason.name END*/

h1 {
  font-weight: lighter;
  font-size: 100%;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
  display: inline;
  font-family: "Helvetica", sans-serif;
  font-size: 1.1em;
}

nav {
  font-family: "Helvetica", sans-serif;

}

a:link {
  text-decoration: none;
  color: #999;
}

a:hover {
  text-decoration: none;
  color: #ff9966;
}

a:visited {
  text-decoration: none;
  color: #ff9966;
}

.logo {
  float: left;
  /*padding: 10px*/;
}

.socialIcons {
  float: right;
  margin: 10px;
}

.tagline{
  opacity: 1;
  height: 150px;
  font-family: 'Pinyon Script', serif;
  text-align: left;
  font-size: 120px;
  line-height: 100px;
  color: #999;

  /*float: left;*/
  /*border-bottom: 500px;*/
  margin: 0px 25% 0px 20px;
  /*padding: 0px 0px 40px;*/
  display: inline-block;
}

Sorry, it won't let me post an image. Thank you!

Upvotes: 0

Views: 1567

Answers (2)

user4531029
user4531029

Reputation:

Try using the z-index CSS attribute. This basically sets the layer on the page that the element is on. Once you set that, you can do one of two things:

position: absolute 
top: -(x)px

or...

margin-top: -(x)px;

I hope this helps :)

Upvotes: 0

Michael Roach
Michael Roach

Reputation: 168

You're not using your image as a background image, you're using an inline-image:

<img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />

I swapped it into the background of your section (named the class background) and did a tiny bit of styling: http://codepen.io/anon/pen/gbXrYv

Upvotes: 1

Related Questions