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

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,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 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,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 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?