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.

Owa Aquino
19,277 PointsHelp! Unwanted background color visible on my page.
Hi guys! I'm working on my portfolio website. Below is my workspace
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!

Owa Aquino
19,277 PointsHi Will i have updated the link. :)
2 Answers

Jason Anders
Treehouse Moderator 145,623 PointsHey 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
19,277 PointsI'll use the first option. Thank you again Jason! :)

Jason Anders
Treehouse Moderator 145,623 PointsHey 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
19,277 PointsThanks 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?
Will Peach
6,572 PointsWill Peach
6,572 PointsHi, could you post your code as opposed to the link to the WorkSpace?