Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Owa Aquino
Owa Aquino
19,277 Points
Posted by Owa Aquino
Owa Aquino
19,277 Points

Help! Unwanted background color visible on my page.

Hi guys! I'm working on my portfolio website. Below is my workspace

https://w.trhou.se/duozr3kcbd

Though I have a minor problem. As you can see there's a red background color around the navigation. I think it's from the body background color.

What i wanted to do for the navigation buttons, to be displayed below the title header and having the heading image as its background.

Hope you can help me here. TYIA!

Cheers!

Will Peach
Will Peach
6,572 Points
Will Peach
Will Peach
6,572 Points

Hi, could you post your code as opposed to the link to the WorkSpace?

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Hi Will i have updated the link. :)

2 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,623 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,623 Points

Hey Owa,

You can achieve that quite simply by changing two things:

First, you'll need to move your entire nav section to inside the header section under the <h1>

<body>
  <header>
      <a href="#" id="logo_owa">
        <img src="img/logo_owa.png" alt="Owa Logo" >
      </a>
      <h1>Owa Aquino</h1>
      <nav>
    <ul>
          <li class="selected"><a href="index.html">Services</a></li>
          <li><a href="works.html">Works</a></li>
          <li><a href="contact.html">Contact</a></li>
    </ul>
      </nav> <!-- END OF NAVIGATION -->
  </header> <!-- END OF HEADER -->

Second, change the height in your CSS file for the header to 550px.

header {
  height: 550px;
  text-align: center;
  float: left;
  margin: 0;
  padding: 5px 0 0 0;
  width: 100%;
  background-image: url(../img/bg_landingPage.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

:)

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

I'll use the first option. Thank you again Jason! :)

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Hey Jason,

Thanks again for the help.. check this out :D..

https://w.trhou.se/duozr3kcbd

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,623 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,623 Points

Hey Owa,

Yes it is coming from your body element. Is there any reason why you have the background-color set to tomato in the body? If no, just delete that line and you're problem goes away. But, if there is a reason, then you can just add a back-ground color property to your nav element: 

nav {
    text-align: center;
  background-color: white;
}

Looks good by the way. :)

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Thanks Jason!

Nope no reason for the tomato background of the body I'll have remove it. But how can I make the nav floats with the logo and title and there background will be the cover photo?