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

HTML

Posted by Chris Eguires
Chris Eguires
3,338 Points

HTML/CSS Formatting issue

I am trying to make a header for my webpage, but am having some issues. I have text and a picture and I want the text to have full opacity while the image is in the background. I cant seem to get the size to be correct either... Here is the html/css snippet:

<header>
      <div class="caffeineSymbol">
        <a href="index.html" id="logo">
          <h1>High On Caffeine</h1>
          <h2></h2>
        </a>    
      </div>
      <nav>  
        <ul>
          <li><a href="index.html" class="selected">Comics</a></li>
          <li><a href="blog.html">Blog</a></li>
          <li><a href="news.html">News</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>     
    </header>

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0 15px 20px;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
  text-align: left;
}

I know this css is terrible - I was experimenting with some code. 

.caffeineSymbol{
    background-image:url(../img/CaffeineSymbol.jpg);
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 400px;
    height: 200px;
    margin: 0 0 -200px -200px;
    background-size: 300px 60px;
    background-repeat: no-repeat;
}

1 Answer

Steven Parker
Steven Parker
243,331 Points
Steven Parker
Steven Parker
243,331 Points

This code should do as you describe, place text over an image with both being opaque. Without seeing the actual image, it's hard to know what you mean by you "cant seem to get the size to be correct".

A couple of (possibly unrelated) observations:

  • those negative margins push the div partly off the window
  • you have more than one height setting - only the last one will be used.

:information_source: If you're working in workspaces, you can use the snapshot function and provide the link to it here.