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
David Brooks
4,726 PointsHeader/Nav Cover Image Properties
I have a relatively simple idea in mind which I would like to build (but have struggled to so far)
The header will use a cover background image so as it is always 100% the width of the page, and when that page is resized, the height automatically adjusts too. Inside the bottom edge of this image sits an overlay of three navigation tabs (in white, with a 65% opacity black background so as the cover image is still visible). Unfortunately nothing I seem to do works. How might you build this?
2 Answers
David Brooks
4,726 PointsI did it! And it even splits the translucent part of the navigation bar so as it doesn't affect the tab text colour. YUS!
HTML _____________________
<header>
<div class="header">
<img class="masthead" src="../img/aboutmasthead.jpg ">
<div class="tabs">
<a id="about" href="about.html"><p>About</p></a>
<a id="portfolio" href="portfolio.html"><p>Portfolio</p></a>
<a id="contact" href="contact.html"><p>Contact</p></a>
</div>
<div class="bar">
</div>
</div>
</header>
CSS _______________________
/***************** MASTHEAD *****************/
.header { width: 100%; height: auto; max-width: 3000px; max-height: 1146px; position: relative; }
.masthead { width: 100%; height: auto; position: top; z-index: 1; }
/***************** TABS *****************/
.tabs { width: 100%; text-align: center; position: absolute; bottom: 0; z-index: 3; }
.tabs p { color: #ccc; display: inline-block; text-align: center; padding-left: 5%; padding-right: 5%; }
.bar { background-color: #000; opacity: .60; padding: 23px 50.01%; text-align: center; position: absolute; bottom: 0.45%; z-index: 2; }
about p:hover {
color: #fff;
}
portfolio p:hover {
color: #fff;
}
contact p:hover {
color: #fff;
}
Adam Holt
3,028 PointsHi David
background-size: cover; - displays the full image while maintaining the width and height proportions. This will make the background image fill the parent container.
You can try something like this to position the nav at the bottom:
nav {
background-color: #FFF;
height: 100px;
position: fixed;
bottom: 0;
opacity: 0.65;
width: 100%;
z-index: 1;
}
Also by default elements positioned fixed have a lower z-index so you may also need to adjust this if you want it to overlay.
If you provide the code you have someone may be able to have a look at it and provide a better response :)
Adam
David Brooks
4,726 PointsHey Adam, Thanks for your reply! This was my original stab at it, however the two problems I am getting are;
• the background/cover image is fitting the width of the browser properly, but the height is constrained by the tabs therefore not showing the full image. I have tried assigning padding to the tabs, but for some reason it blows the cover image to a huge size, and I'm unsure a pixel value would be suitable, as the cover height will need to flex rather than be fixed like that. One method I tried, although cant remember what it was, managed to show the full image as desired (forgetting the nav/tab part), however when scaled down to a certain point, would cause the image to break its 100% width rule and disappear off the page.
• when I do manage to show the majority (yet still not always full) cover image height, via assigning a 'min-height', the tabs remain at the top and seem to refuse to become tied to the bottom, free to adjust its height in the page relative to scaling the browser. if that makes sense haha.
Sorry if not all of this makes sense, I've been hashing at this for a couple of days now hoping to figure it out myself for a better understanding of how it works, but keep drawing blanks. Being relatively new to it all, I'm probably missing something blindingly simple(:
HTML_____________________________
<header> <nav class="tabs"> <ul> <a id="about" href="about.html"><li>About</li></a> <a id="portfolio" href="portfolio.html"><li>Portfolio</li></a> <a id="contact" href="contact.html"><li>Contact</li></a> </ul> </nav> </header>
CSS_______________________________
/***************** MASTHEAD *****************/
header { background-image: url('../img/aboutmasthead.jpg'); background-size: cover; background-repeat: no-repeat; background-position: top center; height: 100%; }
/***************** TABS *****************/
.tabs { text-align: center; background-color: #000; opacity: 0.65; width: 100%; vertical-align: bottom; }
.tabs li { display: inline-block; color: #fff; padding: 10px 8%; text-align: center; }
Thank you so much!
(I dont know why the comment has taken all the returns out of my CSS code, sorry about that)
Adam Holt
3,028 PointsCurrently the height of the header is 0, even though it's set it to 100%. To achieve the effect you're looking for you can use 100vh as the value for the height property. This is 100% of the viewport height.
However this might not be supported in all browsers, I think it is in most modern browsers but you can find out more info on support here: