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

Posted by Gavin Mace
Gavin Mace
30,747 Points

How to place a hero background behind your header nav?

Hey guys,

Here is a demo of the site that I'm trying to build:

http://gavinmace.com.au/demo/rawmarketing_html/

I am trying to get the featured image to move to the top of the page and sit behind the header navigation menu. I did have it working by opening the "hero" class before the navigation, but this is causing issues with page templates when I try to migrate to WordPress (you can see that working fine here: http://gavinmace.com.au/demo/rawmarketing_html/index2.html).

Can I move the hero background up without editing the order that I open divs in HTML?

I have tried things like this, but they dont do anything:

.hero { padding/margin/border: -200px 0 0 0; z-index: -1; }

4 Answers

Gavin Mace
Gavin Mace
30,747 Points
Gavin Mace
Gavin Mace
30,747 Points

I kinda did link to the HTML, so you'd only need to open up /index2.html to view source haha.

I just ended up placing only the <head></head> in the header.php and then I placed the different Nav/Hero in my front-page.php and index.php/home.php/single.php files. It's a bit of a hack way of going about it, but it's solved the problem and works .... so I'll just be happy with that and hopefully next time I run into a similar issue, my skills will have improved and I'll figure out a better way of doing it :)

Thanks for your help bro :)

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

xD HTML in your WordPress file to see what you are trying to do :D

Great! You will deffinitelly improve. When I code the same thing, such as CSS, i get each time better, and I understand more each time. Time = success with hard work :D

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I didn't look at the code.

But here sthe technique.

You need to do this:

Wrap the image and navbar in the same div. Put the div position relative. Set the navbar to position absolute, and set it top0.

Hope this helps and you understand this.

But the trick here is to work with position absolute and relative.

For example, try to make it position fixed, and u see it will be on top of it for ever. I hope this help.

Gavin Mace
Gavin Mace
30,747 Points
Gavin Mace
Gavin Mace
30,747 Points

Hey,

Thanks for the reply!

My issue is that if I wrap the hero and nav in the same div, then when I migrate to WordPress, I need to place the hero div in my header.php file, which then makes it display incorrectly on other pages.

So I need to be able to create them both separately.

I tried absolute/relative and applied z-index .... but it just placed the background image over the top of the navigation :/

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I would need to see the WP code what ur doing, but btw, there isn't a perfect solution for it, but different variations. You can always comeback to it later, don't sit and ban your head for 5hours on this, but maybe start doing other things.

Gavin Mace
Gavin Mace
30,747 Points
Gavin Mace
Gavin Mace
30,747 Points

Could I possibly just place the whole header/nav in my front-page.php and index.php files .... and leave the header.php pretty much empty except for the meta stuff?

Probably not an ideal way to do it, but might get the job done.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I don't know, it's hard to imagine it and what is it that you try specifically do.

But you shoudl have header stuff in header.php and you usually break the code apart when you do it. It's okay to have an opening tag in header, that closes in footer as an examplle. But again, it's hard to see without the code what you want to do.